﻿@{
    ViewBag.Title = "Index";
}

<div class="mainContainer">
    <section class="playerRangeControls">
        <div class="stdListTable fullWidth">

            <ul>

                <li>
                    <h4>
                        Joe Smith
                    </h4>
                </li>
                <li>
                    <h4>
                        Bats: <span id="playerBasicRole">R</span>
                    </h4>
                </li>
                <li class="dateRange">
                    <label>From</label>
                    <input id="datepickerFrom" type="text" />
                    <label>To</label>
                    <input id="datepickerTo" type="text" />
                </li>
                <li class="alignright">

                    <span class="showOnly"> Show only the last </span>
                    <select id="BallsInPlay">
                        <option value="1">50</option>
                        <option value="2">150</option>
                        <option value="3">100</option>
                        <option value="4">150</option>
                        <option value="5">200</option>
                        <option value="6">250</option>
                    </select>
                    <span class="showOnly"> balls in play </span>

                </li>

            </ul>

        </div>
    </section>
    <section class="canvassMainContainer">
        <div class="stdTable fullWidth">
            <div class="stdTableRow vsHeaders">
                <div class="stdTableCell">
                    
                    <h3><img src="../../Images/pitcher_left.gif" alt="" /> VS LHP	<aside>PULL</aside></h3>

                </div>
                <!--<div class="stdTableCell">
                    
                </div> -->
                <div class="stdTableCell">
                    <h3>VS RHP <img src="../../Images/pitcher_right.gif" alt="" /><aside>LIGHT SHIFT</aside></h3>
                </div>
            </div>
        </div>
        <h3>OVERALL</h3>
        <div class="stdTable fullWidth">
            
            <div class="stdTableRow canvasRow">
                <div class="stdTableCell">
                    @*<aside>PULL</aside>*@
                    <div class="canvasContainer">
                        <canvas id="canvasLHPone" width="550" height="435"></canvas>
                        <div class="percentLeft">20%</div><div class="percentRight">80%</div>
                        <div class="bottomNotes"><div class="bottomPlayerData">Last 200 PA:  6 bunts :   2 left;  4 right</div></div>
                    </div>

                </div>
                <div class="stdTableCell aligncenter aligntop">
                    
                </div>
                <div class="stdTableCell">
                    @*<aside>PULL</aside>*@
                    <div class="canvasContainer">
                        <canvas id="canvasRHPone" width="550" height="435"></canvas>
                        <div class="percentLeft">20%</div><div class="percentRight">80%</div>
                        <div class="bottomNotes"><div class="bottomPlayerData">Last 200 PA:  6 bunts :   2 left;  4 right</div></div>
                    </div>  
                </div>
            </div>

        </div>

        <h3>BEFORE 2 STRIKES</h3>
        <div class="stdTable fullWidth">
            <div class="stdTableRow canvasRow">
                <div class="stdTableCell">
                    @*<aside>PULL SHIFT</aside>*@
                    <div class="canvasContainer">
                        <canvas id="canvasLHPtwo" width="550" height="435"></canvas>
                        <div class="percentLeft">20%</div><div class="percentRight">80%</div>
                        <div class="bottomNotes"><div class="bottomPlayerData">Last 200 PA:  6 bunts :   2 left;  4 right</div></div>
                    </div>
                </div>
                <div class="stdTableCell aligncenter aligntop">
                    
                </div>
                <div class="stdTableCell">
                    @*<aside>LIGHT SHIFT</aside>*@
                    <div class="canvasContainer">
                        <canvas id="canvasRHPtwo" width="550" height="435"></canvas>
                        <div class="percentLeft">20%</div><div class="percentRight">80%</div>
                        <div class="bottomNotes"><div class="bottomPlayerData">Last 200 PA:  6 bunts :   2 left;  4 right</div></div>
                    </div>  
                </div>
            </div>

        </div>

        <h3>WITH 2 STRIKES</h3>
        <div class="stdTable fullWidth">
            <div class="stdTableRow canvasRow">
                <div class="stdTableCell">
                    @*<aside>PULL SHIFT</aside>*@
                    <div class="canvasContainer">
                        <canvas id="canvasLHPthree" width="550" height="435"></canvas>
                        <div class="percentLeft">20%</div><div class="percentRight">80%</div>
                        <div class="bottomNotes"><div class="bottomPlayerData">Last 200 PA:  6 bunts :   2 left;  4 right</div></div>
                    </div>
                </div>
                <div class="stdTableCell aligncenter aligntop">
                    
                </div>
                <div class="stdTableCell">
                    @*<aside>LIGHT SHIFT</aside>*@
                    <div class="canvasContainer">
                        <canvas id="canvasRHP3" width="550" height="435"></canvas>
                        <div class="percentLeft">20%</div><div class="percentRight">80%</div>
                        <div class="bottomNotes"><div class="bottomPlayerData">Last 200 PA:  6 bunts :   2 left;  4 right</div></div>
                    </div>  
                </div>
            </div>

        </div>

    </section>
</div>

<script type="text/javascript">
window.onload = function() {

    var theCanvas = document.getElementById('canvasLHPone');
    if (theCanvas && theCanvas.getContext) {
        var context = theCanvas.getContext("2d");
        if (context) {
            //main field shape and bg color
            context.fillStyle = "rgb(255,255,255)";
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.fill();

            //5 divisions row 1
            //box 1
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(1, 157);
            context.lineTo(26, 181);
            context.bezierCurveTo(52, 155, 82, 133, 115, 116);
            context.lineTo(100, 85);
            context.bezierCurveTo(64, 103, 31, 127, 1, 157);
            context.fill();

            //box 2
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(100, 85);
            context.lineTo(115, 116);
            context.bezierCurveTo(148, 100, 183, 88, 221, 82);
            context.lineTo(215, 47);
            context.bezierCurveTo(175, 54, 136, 66, 100, 85);
            context.fill();

            //box3
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(215, 47);
            context.lineTo(221, 82);
            context.bezierCurveTo(239, 79, 257, 78, 276, 78);
            context.bezierCurveTo(295, 78, 313, 79, 331, 82);
            context.lineTo(337, 47);
            context.bezierCurveTo(297, 41, 256, 41, 215, 47);
            context.fill();

            //box4
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(337, 47);
            context.lineTo(331, 82);
            context.bezierCurveTo(369, 88, 404, 100, 437, 116);
            context.lineTo(452, 85);
            context.bezierCurveTo(416, 66, 377, 54, 337, 47);
            context.fill();

            //box5
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(550, 157);
            context.bezierCurveTo(521, 127, 488, 103, 452, 85);
            context.lineTo(437, 116);
            context.bezierCurveTo(470, 133, 500, 155, 526, 181);
            context.lineTo(550, 157);
            context.fill();

            //9 divisions row 2
            //take note last value for rgba can also be in decimals
            //the full value below is 255
            //box6
            context.fillStyle = "rgba(255,46,58,.0)";
            context.beginPath();
            context.moveTo(73, 142);
            context.bezierCurveTo(56, 153, 41, 166, 26, 181);
            context.lineTo(62, 218);
            context.bezierCurveTo(75, 205, 88, 194, 103, 184);
            context.lineTo(73, 142);
            context.fill();

            //box7
            context.fillStyle = "rgba(255,46,58,.5)";
            context.beginPath();
            context.moveTo(126, 111);
            context.bezierCurveTo(108, 119, 90, 130, 73, 142);
            context.lineTo(103, 184);
            context.bezierCurveTo(117, 174, 132, 165, 148, 157);
            context.lineTo(126, 111);
            context.fill();

            //box8
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(184, 89);
            context.bezierCurveTo(165, 95, 145, 102, 126, 111);
            context.lineTo(148, 157);
            context.bezierCurveTo(164, 150, 181, 144, 198, 139);
            context.lineTo(184, 89);
            context.fill();

            //box9
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(245, 79);
            context.bezierCurveTo(225, 81, 204, 84, 184, 89);
            context.lineTo(198, 139);
            context.bezierCurveTo(215, 135, 232, 132, 250, 130);
            context.lineTo(245, 79);
            context.fill();

            //box10
            context.fillStyle = "rgba(255,46,58,.85)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(307, 79);
            context.bezierCurveTo(286, 77, 266, 77, 245, 79);
            context.lineTo(250, 130);
            context.bezierCurveTo(267, 129, 285, 129, 302, 130);
            context.fill();

            //box11
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(368, 90);
            context.bezierCurveTo(348, 84, 327, 81, 307, 79);
            context.lineTo(302, 130);
            context.bezierCurveTo(320, 132, 337, 135, 354, 139);
            context.lineTo(368, 90);
            context.fill();

            //box12
            context.fillStyle = "rgba(255,46,58,.0)";
            context.beginPath();
            context.moveTo(426, 111);
            context.bezierCurveTo(407, 102, 387, 95, 368, 90);
            context.lineTo(354, 139);
            context.bezierCurveTo(371, 144, 388, 150, 404, 158);
            context.lineTo(426, 111);
            context.fill();

            //box13
            context.fillStyle = "rgba(255,46,58,.5)";
            context.beginPath();
            context.moveTo(479, 142);
            context.bezierCurveTo(462, 130, 444, 119, 426, 111);
            context.lineTo(404, 158);
            context.bezierCurveTo(420, 165, 435, 174, 449, 184);
            context.lineTo(479, 142);
            context.fill();

            //box14
            context.fillStyle = "rgba(255,46,58,.0)";
            context.beginPath();
            context.moveTo(479, 142);
            context.lineTo(449, 184);
            context.bezierCurveTo(463, 194, 477, 205, 489, 218);
            context.lineTo(526, 181);
            context.bezierCurveTo(511, 167, 495, 153, 479, 142);
            context.fill();

            //9 divisions row 3
            //box15
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(103, 184);
            context.lineTo(160, 266);
            context.bezierCurveTo(170, 259, 180, 253, 191, 248);
            context.lineTo(148, 157);
            context.bezierCurveTo(132, 165, 117, 174, 103, 184);
            context.fill();

            //box16
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.lineTo(103, 184);
            context.bezierCurveTo(88, 194, 75, 205, 62, 218);
            context.lineTo(133, 289);
            context.bezierCurveTo(141, 280, 150, 273, 160, 266);
            context.fill();

            ////box17
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(148, 157);
            context.lineTo(191, 248);
            context.bezierCurveTo(201, 243, 212, 239, 224, 236);
            context.lineTo(198, 139);
            context.bezierCurveTo(181, 144, 164, 150, 148, 157);
            context.fill();


            //box18
            context.fillStyle = "rgba(255,46,58,.4)";
            context.beginPath();
            context.moveTo(198, 139);
            context.lineTo(224, 236);
            context.bezierCurveTo(235, 233, 247, 231, 258, 230);
            context.lineTo(250, 130);
            context.bezierCurveTo(232, 132, 215, 135, 198, 139);
            context.fill();


            //box19
            context.fillStyle = "rgba(255,46,58,.8)";
            context.beginPath();
            context.moveTo(250, 130);
            context.lineTo(258, 230);
            context.bezierCurveTo(264, 230, 270, 230, 276, 230);
            context.bezierCurveTo(282, 230, 288, 230, 294, 230);
            context.lineTo(302, 130);
            context.bezierCurveTo(285, 129, 267, 129, 250, 130);
            context.fill();

            //box20
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(294, 230);
            context.bezierCurveTo(306, 231, 317, 233, 328, 236);
            context.lineTo(354, 139);
            context.bezierCurveTo(337, 135, 320, 132, 302, 130);
            context.fill();

            //box21
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(354, 139);
            context.lineTo(328, 236);
            context.bezierCurveTo(340, 240, 351, 244, 361, 249);
            context.lineTo(404, 158);
            context.bezierCurveTo(388, 150, 371, 144, 354, 139);
            context.fill();

            //box22
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(404, 158);
            context.lineTo(361, 249);
            context.bezierCurveTo(372, 254, 382, 260, 392, 266);
            context.lineTo(449, 184);
            context.bezierCurveTo(435, 174, 420, 165, 404, 158);
            context.fill();

            //box23
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(489, 218);
            context.bezierCurveTo(477, 205, 463, 194, 449, 184);
            context.lineTo(392, 266);
            context.bezierCurveTo(401, 273, 410, 280, 418, 289);
            context.lineTo(489, 218);
            context.fill();


            //9 divisions row 4
            //box24
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.bezierCurveTo(150, 273, 141, 280, 133, 289);
            context.lineTo(151, 307);
            context.lineTo(164, 320);
            context.bezierCurveTo(171, 314, 178, 308, 186, 302);
            context.lineTo(175, 287);
            context.lineTo(160, 266);
            context.fill();

            //box25
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(191, 248);
            context.bezierCurveTo(180, 253, 170, 259, 160, 266);
            context.lineTo(175, 287);
            context.lineTo(186, 302);
            context.bezierCurveTo(193, 297, 201, 293, 209, 289);
            context.lineTo(201, 271);
            context.lineTo(191, 248);
            context.fill();

            ////box26
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(224, 236);
            context.bezierCurveTo(212, 239, 201, 243, 191, 248);
            context.lineTo(201, 271);
            context.lineTo(209, 289);
            context.bezierCurveTo(218, 285, 226, 282, 235, 279);
            context.lineTo(230, 261);
            context.lineTo(224, 236);
            context.fill();

            //box27
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(258, 230);
            context.bezierCurveTo(247, 231, 235, 233, 224, 236);
            context.lineTo(230, 261);
            context.lineTo(235, 279);
            context.bezierCurveTo(244, 277, 253, 275, 262, 275);
            context.lineTo(261, 256);
            context.lineTo(258, 230);
            context.fill();

            //box28
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(294, 230);
            context.bezierCurveTo(288, 230, 282, 230, 276, 230);
            context.bezierCurveTo(270, 230, 264, 230, 258, 230);
            context.lineTo(261, 256);
            context.lineTo(262, 275);
            context.bezierCurveTo(267, 274, 271, 274, 276, 274);
            context.bezierCurveTo(280, 274, 285, 274, 290, 275);
            context.lineTo(291, 256);
            context.lineTo(294, 230);
            context.fill();

            //box29
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(328, 236);
            context.bezierCurveTo(317, 233, 306, 231, 294, 230);
            context.lineTo(291, 256);
            context.lineTo(290, 275);
            context.bezierCurveTo(299, 276, 308, 277, 317, 279);
            context.lineTo(322, 261);
            context.lineTo(328, 236);
            context.fill();

            //box30
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(361, 249);
            context.bezierCurveTo(351, 244, 340, 240, 328, 236);
            context.lineTo(322, 261);
            context.lineTo(317, 279);
            context.bezierCurveTo(326, 282, 334, 285, 343, 289);
            context.lineTo(351, 272);
            context.lineTo(361, 249);
            context.fill();

            //box31
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(392, 266);
            context.bezierCurveTo(382, 260, 372, 254, 361, 249);
            context.lineTo(351, 272);
            context.lineTo(343, 289);
            context.bezierCurveTo(351, 293, 359, 297, 366, 303);
            context.lineTo(377, 287);
            context.lineTo(392, 266);
            context.fill();

            //box32
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(387, 320);
            context.lineTo(400, 307);
            context.lineTo(418, 289);
            context.bezierCurveTo(410, 280, 401, 273, 392, 266);
            context.lineTo(377, 287);
            context.lineTo(366, 303);
            context.bezierCurveTo(374, 308, 381, 314, 387, 320);
            context.fill();

            //9 divisions row 5
            //box33
            context.fillStyle = "rgba(255,46,58,.8)";
            context.beginPath();
            context.moveTo(164, 320);
            context.lineTo(182, 337);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(200, 322);
            context.lineTo(186, 302);
            context.bezierCurveTo(178, 308, 171, 314, 164, 320);
            context.fill();

            //box34
            context.fillStyle = "rgba(255,46,58,1)";
            context.beginPath();
            context.moveTo(200, 322);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(220, 311);
            context.lineTo(209, 289);
            context.bezierCurveTo(201, 293, 193, 297, 186, 302);
            context.lineTo(200, 322);
            context.fill();

            //box35
            context.fillStyle = "rgba(255,46,58,.8)";
            context.beginPath();
            context.moveTo(220, 311);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(242, 303);
            context.lineTo(235, 279);
            context.bezierCurveTo(226, 282, 218, 285, 209, 289);
            context.lineTo(220, 311);
            context.fill();

            //box36
            context.fillStyle = "rgba(255,46,58,1)";
            context.beginPath();
            context.moveTo(242, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(264, 299);
            context.lineTo(262, 275);
            context.bezierCurveTo(253, 275, 244, 277, 235, 279);
            context.lineTo(242, 303);
            context.fill();

            //box37
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(262, 275);
            context.lineTo(264, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(288, 299);
            context.lineTo(290, 275);
            context.bezierCurveTo(285, 274, 280, 274, 276, 274);
            context.bezierCurveTo(271, 274, 267, 274, 262, 275);
            context.fill();

            //box38
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(288, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(310, 303);
            context.lineTo(317, 279);
            context.bezierCurveTo(308, 277, 299, 276, 290, 275);
            context.lineTo(288, 299);
            context.fill();

            //box39
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(310, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(332, 311);
            context.lineTo(343, 289);
            context.bezierCurveTo(334, 285, 326, 282, 317, 279);
            context.lineTo(310, 303);
            context.fill();

            //box40
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(332, 311);
            context.lineTo(276, 431);
            context.lineTo(277, 430);
            context.lineTo(352, 323);
            context.lineTo(366, 303);
            context.bezierCurveTo(359, 297, 351, 293, 343, 289);
            context.lineTo(332, 311);
            context.fill();

            //box41
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(366, 303);
            context.lineTo(352, 323);
            context.lineTo(277, 430);
            context.lineTo(370, 337);
            context.lineTo(387, 320);
            context.bezierCurveTo(381, 314, 374, 308, 366, 303);
            context.fill();



            //lines do not edit
            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(61, 217);
            context.lineTo(63, 219);
            context.bezierCurveTo(63, 218, 64, 217, 64, 217);
            context.lineTo(63, 215);
            context.bezierCurveTo(62, 216, 62, 217, 61, 217);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 141);
            context.lineTo(189, 143);
            context.bezierCurveTo(191, 142, 192, 142, 194, 141);
            context.lineTo(193, 139);
            context.bezierCurveTo(192, 140, 190, 140, 188, 141);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(208, 136);
            context.lineTo(209, 138);
            context.bezierCurveTo(210, 137, 212, 137, 213, 137);
            context.lineTo(213, 135);
            context.bezierCurveTo(211, 135, 210, 135, 208, 136);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(198, 138);
            context.lineTo(199, 140);
            context.bezierCurveTo(200, 140, 202, 139, 204, 139);
            context.lineTo(203, 137);
            context.bezierCurveTo(201, 137, 200, 138, 198, 138);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 144);
            context.lineTo(179, 146);
            context.bezierCurveTo(181, 145, 183, 145, 184, 144);
            context.lineTo(184, 142);
            context.bezierCurveTo(182, 143, 180, 143, 179, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(218, 134);
            context.lineTo(218, 136);
            context.bezierCurveTo(220, 135, 222, 135, 223, 135);
            context.lineTo(223, 133);
            context.bezierCurveTo(221, 133, 220, 133, 218, 134);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(248, 129);
            context.lineTo(248, 131);
            context.bezierCurveTo(250, 131, 252, 131, 253, 131);
            context.lineTo(253, 129);
            context.bezierCurveTo(251, 129, 250, 129, 248, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(160, 151);
            context.lineTo(161, 153);
            context.bezierCurveTo(162, 152, 164, 152, 165, 151);
            context.lineTo(164, 149);
            context.bezierCurveTo(163, 150, 161, 150, 160, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(258, 129);
            context.lineTo(258, 131);
            context.bezierCurveTo(260, 130, 262, 130, 263, 130);
            context.lineTo(263, 128);
            context.bezierCurveTo(262, 128, 260, 128, 258, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(238, 130);
            context.lineTo(238, 132);
            context.bezierCurveTo(240, 132, 242, 132, 243, 132);
            context.lineTo(243, 130);
            context.bezierCurveTo(241, 130, 240, 130, 238, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(228, 132);
            context.lineTo(228, 134);
            context.bezierCurveTo(230, 134, 232, 133, 233, 133);
            context.lineTo(233, 131);
            context.bezierCurveTo(231, 131, 230, 132, 228, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(132, 164);
            context.lineTo(133, 166);
            context.bezierCurveTo(135, 165, 136, 164, 138, 164);
            context.lineTo(137, 162);
            context.bezierCurveTo(135, 163, 134, 163, 132, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(82, 198);
            context.lineTo(83, 200);
            context.bezierCurveTo(84, 199, 86, 198, 87, 197);
            context.lineTo(86, 195);
            context.bezierCurveTo(84, 196, 83, 197, 82, 198);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(90, 192);
            context.lineTo(91, 194);
            context.bezierCurveTo(92, 193, 94, 191, 95, 190);
            context.lineTo(94, 189);
            context.bezierCurveTo(92, 190, 91, 191, 90, 192);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(150, 155);
            context.lineTo(151, 157);
            context.bezierCurveTo(153, 156, 154, 156, 156, 155);
            context.lineTo(155, 153);
            context.bezierCurveTo(154, 154, 152, 154, 150, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(98, 186);
            context.lineTo(99, 187);
            context.bezierCurveTo(100, 186, 102, 186, 103, 185);
            context.lineTo(102, 183);
            context.bezierCurveTo(101, 184, 99, 185, 98, 186);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(74, 205);
            context.lineTo(76, 206);
            context.bezierCurveTo(77, 205, 78, 204, 79, 203);
            context.lineTo(78, 202);
            context.bezierCurveTo(77, 203, 75, 204, 74, 205);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(67, 212);
            context.lineTo(68, 213);
            context.bezierCurveTo(69, 212, 71, 211, 72, 210);
            context.lineTo(70, 208);
            context.bezierCurveTo(69, 210, 68, 211, 67, 212);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(106, 180);
            context.lineTo(107, 182);
            context.bezierCurveTo(109, 181, 110, 180, 112, 179);
            context.lineTo(110, 177);
            context.bezierCurveTo(109, 178, 108, 179, 106, 180);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(268, 128);
            context.lineTo(268, 130);
            context.bezierCurveTo(270, 130, 272, 130, 273, 130);
            context.lineTo(273, 128);
            context.bezierCurveTo(272, 128, 270, 128, 268, 128);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(141, 160);
            context.lineTo(142, 161);
            context.bezierCurveTo(144, 161, 145, 160, 147, 159);
            context.lineTo(146, 157);
            context.bezierCurveTo(144, 158, 143, 159, 141, 160);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(123, 169);
            context.lineTo(124, 171);
            context.bezierCurveTo(126, 170, 127, 169, 129, 168);
            context.lineTo(128, 167);
            context.bezierCurveTo(126, 167, 125, 168, 123, 169);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(115, 174);
            context.lineTo(116, 176);
            context.bezierCurveTo(117, 175, 119, 174, 120, 173);
            context.lineTo(119, 172);
            context.bezierCurveTo(118, 173, 116, 174, 115, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(169, 147);
            context.lineTo(170, 149);
            context.bezierCurveTo(172, 149, 173, 148, 175, 148);
            context.lineTo(174, 146);
            context.bezierCurveTo(172, 146, 171, 147, 169, 147);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(431, 174);
            context.bezierCurveTo(433, 174, 434, 175, 436, 176);
            context.lineTo(437, 174);
            context.bezierCurveTo(435, 174, 434, 173, 433, 172);
            context.lineTo(431, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(440, 179);
            context.bezierCurveTo(441, 180, 443, 181, 444, 182);
            context.lineTo(445, 180);
            context.bezierCurveTo(444, 179, 442, 178, 441, 177);
            context.lineTo(440, 179);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(423, 168);
            context.bezierCurveTo(424, 169, 426, 170, 427, 171);
            context.lineTo(428, 169);
            context.bezierCurveTo(427, 168, 425, 168, 424, 167);
            context.lineTo(423, 168);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 159);
            context.bezierCurveTo(406, 160, 408, 161, 409, 161);
            context.lineTo(410, 160);
            context.bezierCurveTo(409, 159, 407, 158, 406, 157);
            context.lineTo(405, 159);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(414, 164);
            context.bezierCurveTo(415, 164, 417, 165, 418, 166);
            context.lineTo(419, 164);
            context.bezierCurveTo(418, 163, 416, 163, 415, 162);
            context.lineTo(414, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(396, 155);
            context.bezierCurveTo(397, 156, 399, 156, 400, 157);
            context.lineTo(401, 155);
            context.bezierCurveTo(400, 155, 398, 154, 397, 153);
            context.lineTo(396, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 130);
            context.bezierCurveTo(280, 130, 282, 130, 284, 130);
            context.lineTo(284, 128);
            context.bezierCurveTo(282, 128, 280, 128, 278, 128);
            context.lineTo(278, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(480, 210);
            context.bezierCurveTo(481, 211, 482, 212, 483, 213);
            context.lineTo(485, 212);
            context.bezierCurveTo(483, 211, 482, 209, 481, 208);
            context.lineTo(480, 210);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(456, 190);
            context.bezierCurveTo(458, 191, 459, 192, 460, 193);
            context.lineTo(462, 192);
            context.bezierCurveTo(460, 191, 459, 190, 458, 189);
            context.lineTo(456, 190);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(448, 185);
            context.bezierCurveTo(450, 185, 451, 186, 452, 187);
            context.lineTo(454, 186);
            context.bezierCurveTo(452, 185, 451, 184, 449, 183);
            context.lineTo(448, 185);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(464, 197);
            context.bezierCurveTo(466, 198, 467, 199, 468, 200);
            context.lineTo(470, 198);
            context.bezierCurveTo(468, 197, 467, 196, 466, 195);
            context.lineTo(464, 197);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(472, 203);
            context.bezierCurveTo(473, 204, 475, 205, 476, 206);
            context.lineTo(477, 205);
            context.bezierCurveTo(476, 204, 475, 203, 473, 202);
            context.lineTo(472, 203);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(319, 133);
            context.bezierCurveTo(320, 133, 322, 134, 324, 134);
            context.lineTo(324, 132);
            context.bezierCurveTo(322, 132, 321, 131, 319, 131);
            context.lineTo(319, 133);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(309, 132);
            context.bezierCurveTo(310, 132, 312, 132, 314, 132);
            context.lineTo(314, 130);
            context.bezierCurveTo(312, 130, 311, 130, 309, 130);
            context.lineTo(309, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(289, 130);
            context.bezierCurveTo(290, 130, 292, 131, 294, 131);
            context.lineTo(294, 129);
            context.bezierCurveTo(292, 129, 290, 128, 289, 128);
            context.lineTo(289, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(387, 151);
            context.bezierCurveTo(388, 152, 390, 152, 391, 153);
            context.lineTo(392, 151);
            context.bezierCurveTo(390, 151, 389, 150, 387, 149);
            context.lineTo(387, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(299, 131);
            context.bezierCurveTo(300, 131, 302, 131, 304, 131);
            context.lineTo(304, 129);
            context.bezierCurveTo(302, 129, 300, 129, 299, 129);
            context.lineTo(299, 131);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(329, 135);
            context.bezierCurveTo(330, 135, 332, 135, 333, 136);
            context.lineTo(334, 134);
            context.bezierCurveTo(332, 133, 331, 133, 329, 133);
            context.lineTo(329, 135);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(368, 144);
            context.bezierCurveTo(369, 145, 371, 145, 372, 146);
            context.lineTo(373, 144);
            context.bezierCurveTo(371, 144, 370, 143, 368, 143);
            context.lineTo(368, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(377, 148);
            context.bezierCurveTo(379, 148, 380, 149, 382, 149);
            context.lineTo(383, 148);
            context.bezierCurveTo(381, 147, 379, 146, 378, 146);
            context.lineTo(377, 148);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(348, 139);
            context.bezierCurveTo(350, 139, 351, 140, 353, 140);
            context.lineTo(354, 138);
            context.bezierCurveTo(352, 138, 350, 137, 349, 137);
            context.lineTo(348, 139);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(358, 142);
            context.bezierCurveTo(360, 142, 361, 142, 363, 143);
            context.lineTo(363, 141);
            context.bezierCurveTo(362, 141, 360, 140, 359, 140);
            context.lineTo(358, 142);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(338, 137);
            context.bezierCurveTo(340, 137, 342, 137, 343, 138);
            context.lineTo(344, 136);
            context.bezierCurveTo(342, 135, 340, 135, 339, 135);
            context.lineTo(338, 137);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(487, 217);
            context.bezierCurveTo(488, 217, 488, 218, 489, 219);
            context.lineTo(490, 217);
            context.bezierCurveTo(490, 217, 489, 216, 488, 215);
            context.lineTo(487, 217);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(26, 181);
            context.bezierCurveTo(164, 43, 387, 43, 526, 181);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(437, 116);
            context.lineTo(453, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(331, 82);
            context.lineTo(337, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(221, 82);
            context.lineTo(215, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(115, 116);
            context.lineTo(100, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(164, 320);
            context.bezierCurveTo(226, 259, 325, 259, 387, 320);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(134, 290);
            context.lineTo(132, 288);
            context.bezierCurveTo(133, 288, 133, 287, 134, 286);
            context.lineTo(135, 288);
            context.bezierCurveTo(135, 288, 134, 289, 134, 290);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(139, 284);
            context.lineTo(138, 283);
            context.bezierCurveTo(139, 282, 140, 281, 141, 280);
            context.lineTo(143, 281);
            context.bezierCurveTo(141, 282, 140, 283, 139, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(412, 284);
            context.bezierCurveTo(411, 283, 410, 282, 409, 281);
            context.lineTo(410, 279);
            context.bezierCurveTo(411, 281, 412, 282, 414, 283);
            context.lineTo(412, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(146, 278);
            context.lineTo(145, 276);
            context.bezierCurveTo(146, 275, 148, 274, 149, 273);
            context.lineTo(150, 275);
            context.bezierCurveTo(149, 276, 148, 277, 146, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 278);
            context.bezierCurveTo(404, 277, 402, 276, 401, 275);
            context.lineTo(402, 273);
            context.bezierCurveTo(404, 274, 405, 275, 406, 276);
            context.lineTo(405, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(154, 272);
            context.lineTo(153, 270);
            context.bezierCurveTo(154, 269, 156, 268, 157, 267);
            context.lineTo(158, 269);
            context.bezierCurveTo(157, 270, 155, 271, 154, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(397, 272);
            context.bezierCurveTo(396, 271, 395, 270, 393, 269);
            context.lineTo(395, 267);
            context.bezierCurveTo(396, 268, 397, 269, 399, 270);
            context.lineTo(397, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(162, 266);
            context.lineTo(161, 264);
            context.bezierCurveTo(162, 263, 164, 262, 165, 261);
            context.lineTo(166, 263);
            context.bezierCurveTo(165, 264, 163, 265, 162, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(389, 266);
            context.bezierCurveTo(388, 265, 387, 264, 385, 263);
            context.lineTo(386, 261);
            context.bezierCurveTo(388, 262, 389, 263, 390, 264);
            context.lineTo(389, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(381, 260);
            context.bezierCurveTo(380, 260, 378, 259, 377, 258);
            context.lineTo(378, 256);
            context.bezierCurveTo(379, 257, 381, 258, 382, 259);
            context.lineTo(381, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(170, 260);
            context.lineTo(169, 259);
            context.bezierCurveTo(171, 258, 172, 257, 174, 256);
            context.lineTo(175, 258);
            context.bezierCurveTo(173, 259, 172, 260, 170, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(373, 255);
            context.bezierCurveTo(371, 255, 370, 254, 368, 253);
            context.lineTo(369, 251);
            context.bezierCurveTo(371, 252, 372, 253, 374, 254);
            context.lineTo(373, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 255);
            context.lineTo(178, 254);
            context.bezierCurveTo(179, 253, 181, 252, 182, 251);
            context.lineTo(183, 253);
            context.bezierCurveTo(182, 254, 180, 255, 179, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(364, 251);
            context.bezierCurveTo(362, 250, 361, 249, 359, 249);
            context.lineTo(360, 247);
            context.bezierCurveTo(362, 248, 363, 248, 365, 249);
            context.lineTo(364, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 251);
            context.lineTo(187, 249);
            context.bezierCurveTo(188, 248, 190, 248, 191, 247);
            context.lineTo(192, 249);
            context.bezierCurveTo(191, 249, 189, 250, 188, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(355, 247);
            context.bezierCurveTo(353, 246, 352, 246, 350, 245);
            context.lineTo(351, 243);
            context.bezierCurveTo(353, 244, 354, 244, 356, 245);
            context.lineTo(355, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(197, 247);
            context.lineTo(196, 245);
            context.bezierCurveTo(197, 244, 199, 244, 200, 243);
            context.lineTo(201, 245);
            context.bezierCurveTo(200, 245, 198, 246, 197, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(346, 243);
            context.bezierCurveTo(344, 243, 343, 242, 341, 241);
            context.lineTo(342, 240);
            context.bezierCurveTo(343, 240, 345, 241, 346, 241);
            context.lineTo(346, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(206, 243);
            context.lineTo(205, 241);
            context.bezierCurveTo(207, 241, 208, 240, 210, 240);
            context.lineTo(210, 241);
            context.bezierCurveTo(209, 242, 207, 243, 206, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(336, 240);
            context.bezierCurveTo(335, 239, 333, 239, 332, 238);
            context.lineTo(332, 237);
            context.bezierCurveTo(334, 237, 335, 238, 337, 238);
            context.lineTo(336, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(215, 240);
            context.lineTo(215, 238);
            context.bezierCurveTo(216, 237, 218, 237, 219, 237);
            context.lineTo(220, 238);
            context.bezierCurveTo(218, 239, 217, 239, 215, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(327, 237);
            context.bezierCurveTo(325, 237, 324, 236, 322, 236);
            context.lineTo(323, 234);
            context.bezierCurveTo(324, 234, 326, 235, 328, 235);
            context.lineTo(327, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(225, 237);
            context.lineTo(224, 235);
            context.bezierCurveTo(226, 235, 227, 234, 229, 234);
            context.lineTo(229, 236);
            context.bezierCurveTo(228, 236, 226, 237, 225, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(317, 235);
            context.bezierCurveTo(316, 235, 314, 234, 313, 234);
            context.lineTo(313, 232);
            context.bezierCurveTo(315, 232, 316, 233, 318, 233);
            context.lineTo(317, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(234, 235);
            context.lineTo(234, 233);
            context.bezierCurveTo(235, 233, 237, 232, 239, 232);
            context.lineTo(239, 234);
            context.bezierCurveTo(237, 234, 236, 235, 234, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(308, 233);
            context.bezierCurveTo(306, 233, 304, 233, 303, 232);
            context.lineTo(303, 230);
            context.bezierCurveTo(305, 231, 306, 231, 308, 231);
            context.lineTo(308, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(244, 233);
            context.lineTo(244, 231);
            context.bezierCurveTo(245, 231, 247, 231, 249, 230);
            context.lineTo(249, 232);
            context.bezierCurveTo(247, 233, 246, 233, 244, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(298, 232);
            context.bezierCurveTo(296, 232, 295, 231, 293, 231);
            context.lineTo(293, 229);
            context.bezierCurveTo(295, 229, 297, 230, 298, 230);
            context.lineTo(298, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(254, 232);
            context.lineTo(253, 230);
            context.bezierCurveTo(255, 230, 257, 229, 258, 229);
            context.lineTo(259, 231);
            context.bezierCurveTo(257, 231, 255, 232, 254, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(288, 231);
            context.bezierCurveTo(287, 231, 285, 231, 283, 231);
            context.lineTo(283, 229);
            context.bezierCurveTo(285, 229, 287, 229, 288, 229);
            context.lineTo(288, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(264, 231);
            context.lineTo(263, 229);
            context.bezierCurveTo(265, 229, 267, 229, 268, 229);
            context.lineTo(268, 231);
            context.bezierCurveTo(267, 231, 265, 231, 264, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 231);
            context.bezierCurveTo(277, 231, 275, 231, 273, 231);
            context.lineTo(273, 229);
            context.bezierCurveTo(275, 229, 277, 229, 278, 229);
            context.lineTo(278, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(418, 289);
            context.bezierCurveTo(417, 289, 417, 288, 416, 288);
            context.lineTo(417, 286);
            context.bezierCurveTo(418, 287, 419, 287, 419, 288);
            context.lineTo(418, 289);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(479, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(425, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(367, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(307, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(245, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(184, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(126, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(72, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 45);
            context.bezierCurveTo(521, 48, 519, 50, 516, 50);
            context.lineTo(404, 50);
            context.bezierCurveTo(401, 50, 399, 48, 399, 45);
            context.lineTo(399, 17);
            context.bezierCurveTo(399, 14, 401, 12, 404, 12);
            context.lineTo(516, 12);
            context.bezierCurveTo(519, 12, 521, 14, 521, 17);
            context.lineTo(521, 45);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 345);
            context.bezierCurveTo(521, 348, 519, 350, 516, 350);
            context.lineTo(404, 350);
            context.bezierCurveTo(401, 350, 399, 348, 399, 345);
            context.lineTo(399, 317);
            context.bezierCurveTo(399, 314, 401, 312, 404, 312);
            context.lineTo(516, 312);
            context.bezierCurveTo(519, 312, 521, 314, 521, 317);
            context.lineTo(521, 345);
            context.stroke();








            //end of lines

            //textbox for text

            context.font = "24px calibri";
            context.fillText("197 OF BIP", 407, 39);
            context.textAlign = "center";

            context.font = "24px calibri";
            context.fillText("197 IF BIP", 457, 340);
            context.textAlign = "center";

            //outer row
            //text 1
            context.font = "24px calibri";
            context.fillText("28%", 70, 85);

            //text 2
            context.font = "24px calibri";
            context.fillText("46%", 279, 35);

            //text 3
            context.font = "24px calibri";
            context.fillText("27%", 485, 85);

            //5 divisons row 1
            //text 1
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 60, 138);

            //text 2
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 165, 85);

            //text 3
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 275, 65);

            //text 4
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 390, 85);

            //text 5
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 490, 138);

            //9 divisons row 2
            //text 6
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 65, 190);

            //text 7
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 113, 158);

            //text 8
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 165, 133);

            //text 9
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 217, 115);

            //text 10
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("16", 275, 110);

            //text 11
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 333, 115);

            //text 12
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 387, 133);

            //text 13
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 438, 155);

            //text 14
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 485, 190);

            //9 divisons row 3
            //text 15
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 100, 230);

            //text 16
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 140, 205);

            //text 17 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 185, 185);

            //text 18
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 228, 170);

            //text 19
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("10", 275, 163);

            //text 20
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 323, 170);

            //text 21
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 370, 185);

            //text 22
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 410, 205);

            //text 23
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 450, 230);

            //9 divisons row 4
            //text 24
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 157, 300);

            //text 25
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 187, 285);

            //text 26 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 215, 270);

            //text 27
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 245, 260);

            //text 28
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 275, 255);

            //text 29
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 308, 260);

            //text 30
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 335, 270);

            //text 31
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 364, 285);

            //text 32
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 393, 300);

            //9 divisons row 5
            //text 33
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("18", 183, 330);

            //text 34
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("27", 203, 315);

            //text 35 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("17", 226, 305);

            //text 36
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("21", 252, 297);

            //text 37
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 275, 295);

            //text 38
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 300, 297);

            //text 39
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 325, 305);

            //text 40
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 347, 315);

            //text 41
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("1", 367, 330);


        }
    }

    var theCanvasCol2 = document.getElementById('canvasRHPone');
    if (theCanvasCol2 && theCanvasCol2.getContext) {
        var context = theCanvasCol2.getContext("2d");
        if (context) {
            //main field shape and bg color
            context.fillStyle = "rgb(255,255,255)";
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.fill();

            //5 divisions row 1
            //box 1
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(1, 157);
            context.lineTo(26, 181);
            context.bezierCurveTo(52, 155, 82, 133, 115, 116);
            context.lineTo(100, 85);
            context.bezierCurveTo(64, 103, 31, 127, 1, 157);
            context.fill();

            //box 2
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(100, 85);
            context.lineTo(115, 116);
            context.bezierCurveTo(148, 100, 183, 88, 221, 82);
            context.lineTo(215, 47);
            context.bezierCurveTo(175, 54, 136, 66, 100, 85);
            context.fill();

            //box3
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(215, 47);
            context.lineTo(221, 82);
            context.bezierCurveTo(239, 79, 257, 78, 276, 78);
            context.bezierCurveTo(295, 78, 313, 79, 331, 82);
            context.lineTo(337, 47);
            context.bezierCurveTo(297, 41, 256, 41, 215, 47);
            context.fill();

            //box4
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(337, 47);
            context.lineTo(331, 82);
            context.bezierCurveTo(369, 88, 404, 100, 437, 116);
            context.lineTo(452, 85);
            context.bezierCurveTo(416, 66, 377, 54, 337, 47);
            context.fill();

            //box5
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(550, 157);
            context.bezierCurveTo(521, 127, 488, 103, 452, 85);
            context.lineTo(437, 116);
            context.bezierCurveTo(470, 133, 500, 155, 526, 181);
            context.lineTo(550, 157);
            context.fill();

            //9 divisions row 2
            //take note last value for rgba can also be in decimals
            //the full value below is 255
            //box6
            context.fillStyle = "rgba(0,179,255,.0)";
            context.beginPath();
            context.moveTo(73, 142);
            context.bezierCurveTo(56, 153, 41, 166, 26, 181);
            context.lineTo(62, 218);
            context.bezierCurveTo(75, 205, 88, 194, 103, 184);
            context.lineTo(73, 142);
            context.fill();

            //box7
            context.fillStyle = "rgba(0,179,255,.5)";
            context.beginPath();
            context.moveTo(126, 111);
            context.bezierCurveTo(108, 119, 90, 130, 73, 142);
            context.lineTo(103, 184);
            context.bezierCurveTo(117, 174, 132, 165, 148, 157);
            context.lineTo(126, 111);
            context.fill();

            //box8
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(184, 89);
            context.bezierCurveTo(165, 95, 145, 102, 126, 111);
            context.lineTo(148, 157);
            context.bezierCurveTo(164, 150, 181, 144, 198, 139);
            context.lineTo(184, 89);
            context.fill();

            //box9
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(245, 79);
            context.bezierCurveTo(225, 81, 204, 84, 184, 89);
            context.lineTo(198, 139);
            context.bezierCurveTo(215, 135, 232, 132, 250, 130);
            context.lineTo(245, 79);
            context.fill();

            //box10
            context.fillStyle = "rgba(0,179,255,.85)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(307, 79);
            context.bezierCurveTo(286, 77, 266, 77, 245, 79);
            context.lineTo(250, 130);
            context.bezierCurveTo(267, 129, 285, 129, 302, 130);
            context.fill();

            //box11
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(368, 90);
            context.bezierCurveTo(348, 84, 327, 81, 307, 79);
            context.lineTo(302, 130);
            context.bezierCurveTo(320, 132, 337, 135, 354, 139);
            context.lineTo(368, 90);
            context.fill();

            //box12
            context.fillStyle = "rgba(0,179,255,.0)";
            context.beginPath();
            context.moveTo(426, 111);
            context.bezierCurveTo(407, 102, 387, 95, 368, 90);
            context.lineTo(354, 139);
            context.bezierCurveTo(371, 144, 388, 150, 404, 158);
            context.lineTo(426, 111);
            context.fill();

            //box13
            context.fillStyle = "rgba(0,179,255,.5)";
            context.beginPath();
            context.moveTo(479, 142);
            context.bezierCurveTo(462, 130, 444, 119, 426, 111);
            context.lineTo(404, 158);
            context.bezierCurveTo(420, 165, 435, 174, 449, 184);
            context.lineTo(479, 142);
            context.fill();

            //box14
            context.fillStyle = "rgba(0,179,255,.0)";
            context.beginPath();
            context.moveTo(479, 142);
            context.lineTo(449, 184);
            context.bezierCurveTo(463, 194, 477, 205, 489, 218);
            context.lineTo(526, 181);
            context.bezierCurveTo(511, 167, 495, 153, 479, 142);
            context.fill();

            //9 divisions row 3
            //box15
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(103, 184);
            context.lineTo(160, 266);
            context.bezierCurveTo(170, 259, 180, 253, 191, 248);
            context.lineTo(148, 157);
            context.bezierCurveTo(132, 165, 117, 174, 103, 184);
            context.fill();

            //box16
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.lineTo(103, 184);
            context.bezierCurveTo(88, 194, 75, 205, 62, 218);
            context.lineTo(133, 289);
            context.bezierCurveTo(141, 280, 150, 273, 160, 266);
            context.fill();

            ////box17
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(148, 157);
            context.lineTo(191, 248);
            context.bezierCurveTo(201, 243, 212, 239, 224, 236);
            context.lineTo(198, 139);
            context.bezierCurveTo(181, 144, 164, 150, 148, 157);
            context.fill();


            //box18
            context.fillStyle = "rgba(0,179,255,.4)";
            context.beginPath();
            context.moveTo(198, 139);
            context.lineTo(224, 236);
            context.bezierCurveTo(235, 233, 247, 231, 258, 230);
            context.lineTo(250, 130);
            context.bezierCurveTo(232, 132, 215, 135, 198, 139);
            context.fill();


            //box19
            context.fillStyle = "rgba(0,179,255,.8)";
            context.beginPath();
            context.moveTo(250, 130);
            context.lineTo(258, 230);
            context.bezierCurveTo(264, 230, 270, 230, 276, 230);
            context.bezierCurveTo(282, 230, 288, 230, 294, 230);
            context.lineTo(302, 130);
            context.bezierCurveTo(285, 129, 267, 129, 250, 130);
            context.fill();

            //box20
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(294, 230);
            context.bezierCurveTo(306, 231, 317, 233, 328, 236);
            context.lineTo(354, 139);
            context.bezierCurveTo(337, 135, 320, 132, 302, 130);
            context.fill();

            //box21
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(354, 139);
            context.lineTo(328, 236);
            context.bezierCurveTo(340, 240, 351, 244, 361, 249);
            context.lineTo(404, 158);
            context.bezierCurveTo(388, 150, 371, 144, 354, 139);
            context.fill();

            //box22
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(404, 158);
            context.lineTo(361, 249);
            context.bezierCurveTo(372, 254, 382, 260, 392, 266);
            context.lineTo(449, 184);
            context.bezierCurveTo(435, 174, 420, 165, 404, 158);
            context.fill();

            //box23
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(489, 218);
            context.bezierCurveTo(477, 205, 463, 194, 449, 184);
            context.lineTo(392, 266);
            context.bezierCurveTo(401, 273, 410, 280, 418, 289);
            context.lineTo(489, 218);
            context.fill();


            //9 divisions row 4
            //box24
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.bezierCurveTo(150, 273, 141, 280, 133, 289);
            context.lineTo(151, 307);
            context.lineTo(164, 320);
            context.bezierCurveTo(171, 314, 178, 308, 186, 302);
            context.lineTo(175, 287);
            context.lineTo(160, 266);
            context.fill();

            //box25
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(191, 248);
            context.bezierCurveTo(180, 253, 170, 259, 160, 266);
            context.lineTo(175, 287);
            context.lineTo(186, 302);
            context.bezierCurveTo(193, 297, 201, 293, 209, 289);
            context.lineTo(201, 271);
            context.lineTo(191, 248);
            context.fill();

            ////box26
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(224, 236);
            context.bezierCurveTo(212, 239, 201, 243, 191, 248);
            context.lineTo(201, 271);
            context.lineTo(209, 289);
            context.bezierCurveTo(218, 285, 226, 282, 235, 279);
            context.lineTo(230, 261);
            context.lineTo(224, 236);
            context.fill();

            //box27
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(258, 230);
            context.bezierCurveTo(247, 231, 235, 233, 224, 236);
            context.lineTo(230, 261);
            context.lineTo(235, 279);
            context.bezierCurveTo(244, 277, 253, 275, 262, 275);
            context.lineTo(261, 256);
            context.lineTo(258, 230);
            context.fill();

            //box28
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(294, 230);
            context.bezierCurveTo(288, 230, 282, 230, 276, 230);
            context.bezierCurveTo(270, 230, 264, 230, 258, 230);
            context.lineTo(261, 256);
            context.lineTo(262, 275);
            context.bezierCurveTo(267, 274, 271, 274, 276, 274);
            context.bezierCurveTo(280, 274, 285, 274, 290, 275);
            context.lineTo(291, 256);
            context.lineTo(294, 230);
            context.fill();

            //box29
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(328, 236);
            context.bezierCurveTo(317, 233, 306, 231, 294, 230);
            context.lineTo(291, 256);
            context.lineTo(290, 275);
            context.bezierCurveTo(299, 276, 308, 277, 317, 279);
            context.lineTo(322, 261);
            context.lineTo(328, 236);
            context.fill();

            //box30
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(361, 249);
            context.bezierCurveTo(351, 244, 340, 240, 328, 236);
            context.lineTo(322, 261);
            context.lineTo(317, 279);
            context.bezierCurveTo(326, 282, 334, 285, 343, 289);
            context.lineTo(351, 272);
            context.lineTo(361, 249);
            context.fill();

            //box31
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(392, 266);
            context.bezierCurveTo(382, 260, 372, 254, 361, 249);
            context.lineTo(351, 272);
            context.lineTo(343, 289);
            context.bezierCurveTo(351, 293, 359, 297, 366, 303);
            context.lineTo(377, 287);
            context.lineTo(392, 266);
            context.fill();

            //box32
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(387, 320);
            context.lineTo(400, 307);
            context.lineTo(418, 289);
            context.bezierCurveTo(410, 280, 401, 273, 392, 266);
            context.lineTo(377, 287);
            context.lineTo(366, 303);
            context.bezierCurveTo(374, 308, 381, 314, 387, 320);
            context.fill();

            //9 divisions row 5
            //box33
            context.fillStyle = "rgba(0,179,255,.8)";
            context.beginPath();
            context.moveTo(164, 320);
            context.lineTo(182, 337);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(200, 322);
            context.lineTo(186, 302);
            context.bezierCurveTo(178, 308, 171, 314, 164, 320);
            context.fill();

            //box34
            context.fillStyle = "rgba(0,179,255,1)";
            context.beginPath();
            context.moveTo(200, 322);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(220, 311);
            context.lineTo(209, 289);
            context.bezierCurveTo(201, 293, 193, 297, 186, 302);
            context.lineTo(200, 322);
            context.fill();

            //box35
            context.fillStyle = "rgba(0,179,255,.8)";
            context.beginPath();
            context.moveTo(220, 311);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(242, 303);
            context.lineTo(235, 279);
            context.bezierCurveTo(226, 282, 218, 285, 209, 289);
            context.lineTo(220, 311);
            context.fill();

            //box36
            context.fillStyle = "rgba(0,179,255,1)";
            context.beginPath();
            context.moveTo(242, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(264, 299);
            context.lineTo(262, 275);
            context.bezierCurveTo(253, 275, 244, 277, 235, 279);
            context.lineTo(242, 303);
            context.fill();

            //box37
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(262, 275);
            context.lineTo(264, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(288, 299);
            context.lineTo(290, 275);
            context.bezierCurveTo(285, 274, 280, 274, 276, 274);
            context.bezierCurveTo(271, 274, 267, 274, 262, 275);
            context.fill();

            //box38
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(288, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(310, 303);
            context.lineTo(317, 279);
            context.bezierCurveTo(308, 277, 299, 276, 290, 275);
            context.lineTo(288, 299);
            context.fill();

            //box39
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(310, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(332, 311);
            context.lineTo(343, 289);
            context.bezierCurveTo(334, 285, 326, 282, 317, 279);
            context.lineTo(310, 303);
            context.fill();

            //box40
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(332, 311);
            context.lineTo(276, 431);
            context.lineTo(277, 430);
            context.lineTo(352, 323);
            context.lineTo(366, 303);
            context.bezierCurveTo(359, 297, 351, 293, 343, 289);
            context.lineTo(332, 311);
            context.fill();

            //box41
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(366, 303);
            context.lineTo(352, 323);
            context.lineTo(277, 430);
            context.lineTo(370, 337);
            context.lineTo(387, 320);
            context.bezierCurveTo(381, 314, 374, 308, 366, 303);
            context.fill();



            //lines do not edit
            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(61, 217);
            context.lineTo(63, 219);
            context.bezierCurveTo(63, 218, 64, 217, 64, 217);
            context.lineTo(63, 215);
            context.bezierCurveTo(62, 216, 62, 217, 61, 217);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 141);
            context.lineTo(189, 143);
            context.bezierCurveTo(191, 142, 192, 142, 194, 141);
            context.lineTo(193, 139);
            context.bezierCurveTo(192, 140, 190, 140, 188, 141);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(208, 136);
            context.lineTo(209, 138);
            context.bezierCurveTo(210, 137, 212, 137, 213, 137);
            context.lineTo(213, 135);
            context.bezierCurveTo(211, 135, 210, 135, 208, 136);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(198, 138);
            context.lineTo(199, 140);
            context.bezierCurveTo(200, 140, 202, 139, 204, 139);
            context.lineTo(203, 137);
            context.bezierCurveTo(201, 137, 200, 138, 198, 138);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 144);
            context.lineTo(179, 146);
            context.bezierCurveTo(181, 145, 183, 145, 184, 144);
            context.lineTo(184, 142);
            context.bezierCurveTo(182, 143, 180, 143, 179, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(218, 134);
            context.lineTo(218, 136);
            context.bezierCurveTo(220, 135, 222, 135, 223, 135);
            context.lineTo(223, 133);
            context.bezierCurveTo(221, 133, 220, 133, 218, 134);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(248, 129);
            context.lineTo(248, 131);
            context.bezierCurveTo(250, 131, 252, 131, 253, 131);
            context.lineTo(253, 129);
            context.bezierCurveTo(251, 129, 250, 129, 248, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(160, 151);
            context.lineTo(161, 153);
            context.bezierCurveTo(162, 152, 164, 152, 165, 151);
            context.lineTo(164, 149);
            context.bezierCurveTo(163, 150, 161, 150, 160, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(258, 129);
            context.lineTo(258, 131);
            context.bezierCurveTo(260, 130, 262, 130, 263, 130);
            context.lineTo(263, 128);
            context.bezierCurveTo(262, 128, 260, 128, 258, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(238, 130);
            context.lineTo(238, 132);
            context.bezierCurveTo(240, 132, 242, 132, 243, 132);
            context.lineTo(243, 130);
            context.bezierCurveTo(241, 130, 240, 130, 238, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(228, 132);
            context.lineTo(228, 134);
            context.bezierCurveTo(230, 134, 232, 133, 233, 133);
            context.lineTo(233, 131);
            context.bezierCurveTo(231, 131, 230, 132, 228, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(132, 164);
            context.lineTo(133, 166);
            context.bezierCurveTo(135, 165, 136, 164, 138, 164);
            context.lineTo(137, 162);
            context.bezierCurveTo(135, 163, 134, 163, 132, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(82, 198);
            context.lineTo(83, 200);
            context.bezierCurveTo(84, 199, 86, 198, 87, 197);
            context.lineTo(86, 195);
            context.bezierCurveTo(84, 196, 83, 197, 82, 198);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(90, 192);
            context.lineTo(91, 194);
            context.bezierCurveTo(92, 193, 94, 191, 95, 190);
            context.lineTo(94, 189);
            context.bezierCurveTo(92, 190, 91, 191, 90, 192);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(150, 155);
            context.lineTo(151, 157);
            context.bezierCurveTo(153, 156, 154, 156, 156, 155);
            context.lineTo(155, 153);
            context.bezierCurveTo(154, 154, 152, 154, 150, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(98, 186);
            context.lineTo(99, 187);
            context.bezierCurveTo(100, 186, 102, 186, 103, 185);
            context.lineTo(102, 183);
            context.bezierCurveTo(101, 184, 99, 185, 98, 186);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(74, 205);
            context.lineTo(76, 206);
            context.bezierCurveTo(77, 205, 78, 204, 79, 203);
            context.lineTo(78, 202);
            context.bezierCurveTo(77, 203, 75, 204, 74, 205);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(67, 212);
            context.lineTo(68, 213);
            context.bezierCurveTo(69, 212, 71, 211, 72, 210);
            context.lineTo(70, 208);
            context.bezierCurveTo(69, 210, 68, 211, 67, 212);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(106, 180);
            context.lineTo(107, 182);
            context.bezierCurveTo(109, 181, 110, 180, 112, 179);
            context.lineTo(110, 177);
            context.bezierCurveTo(109, 178, 108, 179, 106, 180);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(268, 128);
            context.lineTo(268, 130);
            context.bezierCurveTo(270, 130, 272, 130, 273, 130);
            context.lineTo(273, 128);
            context.bezierCurveTo(272, 128, 270, 128, 268, 128);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(141, 160);
            context.lineTo(142, 161);
            context.bezierCurveTo(144, 161, 145, 160, 147, 159);
            context.lineTo(146, 157);
            context.bezierCurveTo(144, 158, 143, 159, 141, 160);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(123, 169);
            context.lineTo(124, 171);
            context.bezierCurveTo(126, 170, 127, 169, 129, 168);
            context.lineTo(128, 167);
            context.bezierCurveTo(126, 167, 125, 168, 123, 169);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(115, 174);
            context.lineTo(116, 176);
            context.bezierCurveTo(117, 175, 119, 174, 120, 173);
            context.lineTo(119, 172);
            context.bezierCurveTo(118, 173, 116, 174, 115, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(169, 147);
            context.lineTo(170, 149);
            context.bezierCurveTo(172, 149, 173, 148, 175, 148);
            context.lineTo(174, 146);
            context.bezierCurveTo(172, 146, 171, 147, 169, 147);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(431, 174);
            context.bezierCurveTo(433, 174, 434, 175, 436, 176);
            context.lineTo(437, 174);
            context.bezierCurveTo(435, 174, 434, 173, 433, 172);
            context.lineTo(431, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(440, 179);
            context.bezierCurveTo(441, 180, 443, 181, 444, 182);
            context.lineTo(445, 180);
            context.bezierCurveTo(444, 179, 442, 178, 441, 177);
            context.lineTo(440, 179);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(423, 168);
            context.bezierCurveTo(424, 169, 426, 170, 427, 171);
            context.lineTo(428, 169);
            context.bezierCurveTo(427, 168, 425, 168, 424, 167);
            context.lineTo(423, 168);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 159);
            context.bezierCurveTo(406, 160, 408, 161, 409, 161);
            context.lineTo(410, 160);
            context.bezierCurveTo(409, 159, 407, 158, 406, 157);
            context.lineTo(405, 159);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(414, 164);
            context.bezierCurveTo(415, 164, 417, 165, 418, 166);
            context.lineTo(419, 164);
            context.bezierCurveTo(418, 163, 416, 163, 415, 162);
            context.lineTo(414, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(396, 155);
            context.bezierCurveTo(397, 156, 399, 156, 400, 157);
            context.lineTo(401, 155);
            context.bezierCurveTo(400, 155, 398, 154, 397, 153);
            context.lineTo(396, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 130);
            context.bezierCurveTo(280, 130, 282, 130, 284, 130);
            context.lineTo(284, 128);
            context.bezierCurveTo(282, 128, 280, 128, 278, 128);
            context.lineTo(278, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(480, 210);
            context.bezierCurveTo(481, 211, 482, 212, 483, 213);
            context.lineTo(485, 212);
            context.bezierCurveTo(483, 211, 482, 209, 481, 208);
            context.lineTo(480, 210);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(456, 190);
            context.bezierCurveTo(458, 191, 459, 192, 460, 193);
            context.lineTo(462, 192);
            context.bezierCurveTo(460, 191, 459, 190, 458, 189);
            context.lineTo(456, 190);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(448, 185);
            context.bezierCurveTo(450, 185, 451, 186, 452, 187);
            context.lineTo(454, 186);
            context.bezierCurveTo(452, 185, 451, 184, 449, 183);
            context.lineTo(448, 185);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(464, 197);
            context.bezierCurveTo(466, 198, 467, 199, 468, 200);
            context.lineTo(470, 198);
            context.bezierCurveTo(468, 197, 467, 196, 466, 195);
            context.lineTo(464, 197);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(472, 203);
            context.bezierCurveTo(473, 204, 475, 205, 476, 206);
            context.lineTo(477, 205);
            context.bezierCurveTo(476, 204, 475, 203, 473, 202);
            context.lineTo(472, 203);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(319, 133);
            context.bezierCurveTo(320, 133, 322, 134, 324, 134);
            context.lineTo(324, 132);
            context.bezierCurveTo(322, 132, 321, 131, 319, 131);
            context.lineTo(319, 133);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(309, 132);
            context.bezierCurveTo(310, 132, 312, 132, 314, 132);
            context.lineTo(314, 130);
            context.bezierCurveTo(312, 130, 311, 130, 309, 130);
            context.lineTo(309, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(289, 130);
            context.bezierCurveTo(290, 130, 292, 131, 294, 131);
            context.lineTo(294, 129);
            context.bezierCurveTo(292, 129, 290, 128, 289, 128);
            context.lineTo(289, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(387, 151);
            context.bezierCurveTo(388, 152, 390, 152, 391, 153);
            context.lineTo(392, 151);
            context.bezierCurveTo(390, 151, 389, 150, 387, 149);
            context.lineTo(387, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(299, 131);
            context.bezierCurveTo(300, 131, 302, 131, 304, 131);
            context.lineTo(304, 129);
            context.bezierCurveTo(302, 129, 300, 129, 299, 129);
            context.lineTo(299, 131);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(329, 135);
            context.bezierCurveTo(330, 135, 332, 135, 333, 136);
            context.lineTo(334, 134);
            context.bezierCurveTo(332, 133, 331, 133, 329, 133);
            context.lineTo(329, 135);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(368, 144);
            context.bezierCurveTo(369, 145, 371, 145, 372, 146);
            context.lineTo(373, 144);
            context.bezierCurveTo(371, 144, 370, 143, 368, 143);
            context.lineTo(368, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(377, 148);
            context.bezierCurveTo(379, 148, 380, 149, 382, 149);
            context.lineTo(383, 148);
            context.bezierCurveTo(381, 147, 379, 146, 378, 146);
            context.lineTo(377, 148);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(348, 139);
            context.bezierCurveTo(350, 139, 351, 140, 353, 140);
            context.lineTo(354, 138);
            context.bezierCurveTo(352, 138, 350, 137, 349, 137);
            context.lineTo(348, 139);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(358, 142);
            context.bezierCurveTo(360, 142, 361, 142, 363, 143);
            context.lineTo(363, 141);
            context.bezierCurveTo(362, 141, 360, 140, 359, 140);
            context.lineTo(358, 142);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(338, 137);
            context.bezierCurveTo(340, 137, 342, 137, 343, 138);
            context.lineTo(344, 136);
            context.bezierCurveTo(342, 135, 340, 135, 339, 135);
            context.lineTo(338, 137);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(487, 217);
            context.bezierCurveTo(488, 217, 488, 218, 489, 219);
            context.lineTo(490, 217);
            context.bezierCurveTo(490, 217, 489, 216, 488, 215);
            context.lineTo(487, 217);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(26, 181);
            context.bezierCurveTo(164, 43, 387, 43, 526, 181);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(437, 116);
            context.lineTo(453, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(331, 82);
            context.lineTo(337, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(221, 82);
            context.lineTo(215, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(115, 116);
            context.lineTo(100, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(164, 320);
            context.bezierCurveTo(226, 259, 325, 259, 387, 320);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(134, 290);
            context.lineTo(132, 288);
            context.bezierCurveTo(133, 288, 133, 287, 134, 286);
            context.lineTo(135, 288);
            context.bezierCurveTo(135, 288, 134, 289, 134, 290);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(139, 284);
            context.lineTo(138, 283);
            context.bezierCurveTo(139, 282, 140, 281, 141, 280);
            context.lineTo(143, 281);
            context.bezierCurveTo(141, 282, 140, 283, 139, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(412, 284);
            context.bezierCurveTo(411, 283, 410, 282, 409, 281);
            context.lineTo(410, 279);
            context.bezierCurveTo(411, 281, 412, 282, 414, 283);
            context.lineTo(412, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(146, 278);
            context.lineTo(145, 276);
            context.bezierCurveTo(146, 275, 148, 274, 149, 273);
            context.lineTo(150, 275);
            context.bezierCurveTo(149, 276, 148, 277, 146, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 278);
            context.bezierCurveTo(404, 277, 402, 276, 401, 275);
            context.lineTo(402, 273);
            context.bezierCurveTo(404, 274, 405, 275, 406, 276);
            context.lineTo(405, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(154, 272);
            context.lineTo(153, 270);
            context.bezierCurveTo(154, 269, 156, 268, 157, 267);
            context.lineTo(158, 269);
            context.bezierCurveTo(157, 270, 155, 271, 154, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(397, 272);
            context.bezierCurveTo(396, 271, 395, 270, 393, 269);
            context.lineTo(395, 267);
            context.bezierCurveTo(396, 268, 397, 269, 399, 270);
            context.lineTo(397, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(162, 266);
            context.lineTo(161, 264);
            context.bezierCurveTo(162, 263, 164, 262, 165, 261);
            context.lineTo(166, 263);
            context.bezierCurveTo(165, 264, 163, 265, 162, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(389, 266);
            context.bezierCurveTo(388, 265, 387, 264, 385, 263);
            context.lineTo(386, 261);
            context.bezierCurveTo(388, 262, 389, 263, 390, 264);
            context.lineTo(389, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(381, 260);
            context.bezierCurveTo(380, 260, 378, 259, 377, 258);
            context.lineTo(378, 256);
            context.bezierCurveTo(379, 257, 381, 258, 382, 259);
            context.lineTo(381, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(170, 260);
            context.lineTo(169, 259);
            context.bezierCurveTo(171, 258, 172, 257, 174, 256);
            context.lineTo(175, 258);
            context.bezierCurveTo(173, 259, 172, 260, 170, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(373, 255);
            context.bezierCurveTo(371, 255, 370, 254, 368, 253);
            context.lineTo(369, 251);
            context.bezierCurveTo(371, 252, 372, 253, 374, 254);
            context.lineTo(373, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 255);
            context.lineTo(178, 254);
            context.bezierCurveTo(179, 253, 181, 252, 182, 251);
            context.lineTo(183, 253);
            context.bezierCurveTo(182, 254, 180, 255, 179, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(364, 251);
            context.bezierCurveTo(362, 250, 361, 249, 359, 249);
            context.lineTo(360, 247);
            context.bezierCurveTo(362, 248, 363, 248, 365, 249);
            context.lineTo(364, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 251);
            context.lineTo(187, 249);
            context.bezierCurveTo(188, 248, 190, 248, 191, 247);
            context.lineTo(192, 249);
            context.bezierCurveTo(191, 249, 189, 250, 188, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(355, 247);
            context.bezierCurveTo(353, 246, 352, 246, 350, 245);
            context.lineTo(351, 243);
            context.bezierCurveTo(353, 244, 354, 244, 356, 245);
            context.lineTo(355, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(197, 247);
            context.lineTo(196, 245);
            context.bezierCurveTo(197, 244, 199, 244, 200, 243);
            context.lineTo(201, 245);
            context.bezierCurveTo(200, 245, 198, 246, 197, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(346, 243);
            context.bezierCurveTo(344, 243, 343, 242, 341, 241);
            context.lineTo(342, 240);
            context.bezierCurveTo(343, 240, 345, 241, 346, 241);
            context.lineTo(346, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(206, 243);
            context.lineTo(205, 241);
            context.bezierCurveTo(207, 241, 208, 240, 210, 240);
            context.lineTo(210, 241);
            context.bezierCurveTo(209, 242, 207, 243, 206, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(336, 240);
            context.bezierCurveTo(335, 239, 333, 239, 332, 238);
            context.lineTo(332, 237);
            context.bezierCurveTo(334, 237, 335, 238, 337, 238);
            context.lineTo(336, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(215, 240);
            context.lineTo(215, 238);
            context.bezierCurveTo(216, 237, 218, 237, 219, 237);
            context.lineTo(220, 238);
            context.bezierCurveTo(218, 239, 217, 239, 215, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(327, 237);
            context.bezierCurveTo(325, 237, 324, 236, 322, 236);
            context.lineTo(323, 234);
            context.bezierCurveTo(324, 234, 326, 235, 328, 235);
            context.lineTo(327, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(225, 237);
            context.lineTo(224, 235);
            context.bezierCurveTo(226, 235, 227, 234, 229, 234);
            context.lineTo(229, 236);
            context.bezierCurveTo(228, 236, 226, 237, 225, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(317, 235);
            context.bezierCurveTo(316, 235, 314, 234, 313, 234);
            context.lineTo(313, 232);
            context.bezierCurveTo(315, 232, 316, 233, 318, 233);
            context.lineTo(317, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(234, 235);
            context.lineTo(234, 233);
            context.bezierCurveTo(235, 233, 237, 232, 239, 232);
            context.lineTo(239, 234);
            context.bezierCurveTo(237, 234, 236, 235, 234, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(308, 233);
            context.bezierCurveTo(306, 233, 304, 233, 303, 232);
            context.lineTo(303, 230);
            context.bezierCurveTo(305, 231, 306, 231, 308, 231);
            context.lineTo(308, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(244, 233);
            context.lineTo(244, 231);
            context.bezierCurveTo(245, 231, 247, 231, 249, 230);
            context.lineTo(249, 232);
            context.bezierCurveTo(247, 233, 246, 233, 244, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(298, 232);
            context.bezierCurveTo(296, 232, 295, 231, 293, 231);
            context.lineTo(293, 229);
            context.bezierCurveTo(295, 229, 297, 230, 298, 230);
            context.lineTo(298, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(254, 232);
            context.lineTo(253, 230);
            context.bezierCurveTo(255, 230, 257, 229, 258, 229);
            context.lineTo(259, 231);
            context.bezierCurveTo(257, 231, 255, 232, 254, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(288, 231);
            context.bezierCurveTo(287, 231, 285, 231, 283, 231);
            context.lineTo(283, 229);
            context.bezierCurveTo(285, 229, 287, 229, 288, 229);
            context.lineTo(288, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(264, 231);
            context.lineTo(263, 229);
            context.bezierCurveTo(265, 229, 267, 229, 268, 229);
            context.lineTo(268, 231);
            context.bezierCurveTo(267, 231, 265, 231, 264, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 231);
            context.bezierCurveTo(277, 231, 275, 231, 273, 231);
            context.lineTo(273, 229);
            context.bezierCurveTo(275, 229, 277, 229, 278, 229);
            context.lineTo(278, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(418, 289);
            context.bezierCurveTo(417, 289, 417, 288, 416, 288);
            context.lineTo(417, 286);
            context.bezierCurveTo(418, 287, 419, 287, 419, 288);
            context.lineTo(418, 289);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(479, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(425, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(367, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(307, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(245, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(184, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(126, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(72, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 45);
            context.bezierCurveTo(521, 48, 519, 50, 516, 50);
            context.lineTo(404, 50);
            context.bezierCurveTo(401, 50, 399, 48, 399, 45);
            context.lineTo(399, 17);
            context.bezierCurveTo(399, 14, 401, 12, 404, 12);
            context.lineTo(516, 12);
            context.bezierCurveTo(519, 12, 521, 14, 521, 17);
            context.lineTo(521, 45);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 345);
            context.bezierCurveTo(521, 348, 519, 350, 516, 350);
            context.lineTo(404, 350);
            context.bezierCurveTo(401, 350, 399, 348, 399, 345);
            context.lineTo(399, 317);
            context.bezierCurveTo(399, 314, 401, 312, 404, 312);
            context.lineTo(516, 312);
            context.bezierCurveTo(519, 312, 521, 314, 521, 317);
            context.lineTo(521, 345);
            context.stroke();








            //end of lines

            //textbox for text

            context.font = "24px calibri";
            context.fillText("197 OF BIP", 407, 39);
            context.textAlign = "center";

            context.font = "24px calibri";
            context.fillText("197 IF BIP", 457, 340);
            context.textAlign = "center";

            //outer row
            //text 1
            context.font = "24px calibri";
            context.fillText("28%", 70, 85);

            //text 2
            context.font = "24px calibri";
            context.fillText("46%", 279, 35);

            //text 3
            context.font = "24px calibri";
            context.fillText("27%", 485, 85);

            //5 divisons row 1
            //text 1
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 60, 138);

            //text 2
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 165, 85);

            //text 3
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 275, 65);

            //text 4
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 390, 85);

            //text 5
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 490, 138);

            //9 divisons row 2
            //text 6
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 65, 190);

            //text 7
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 113, 158);

            //text 8
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 165, 133);

            //text 9
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 217, 115);

            //text 10
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("16", 275, 110);

            //text 11
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 333, 115);

            //text 12
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 387, 133);

            //text 13
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 438, 155);

            //text 14
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 485, 190);

            //9 divisons row 3
            //text 15
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 100, 230);

            //text 16
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 140, 205);

            //text 17 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 185, 185);

            //text 18
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 228, 170);

            //text 19
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("10", 275, 163);

            //text 20
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 323, 170);

            //text 21
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 370, 185);

            //text 22
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 410, 205);

            //text 23
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 450, 230);

            //9 divisons row 4
            //text 24
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 157, 300);

            //text 25
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 187, 285);

            //text 26 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 215, 270);

            //text 27
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 245, 260);

            //text 28
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 275, 255);

            //text 29
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 308, 260);

            //text 30
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 335, 270);

            //text 31
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 364, 285);

            //text 32
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 393, 300);

            //9 divisons row 5
            //text 33
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("18", 183, 330);

            //text 34
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("27", 203, 315);

            //text 35 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("17", 226, 305);

            //text 36
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("21", 252, 297);

            //text 37
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 275, 295);

            //text 38
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 300, 297);

            //text 39
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 325, 305);

            //text 40
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 347, 315);

            //text 41
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("1", 367, 330);
        }
    }

    var theCanvasR2C1 = document.getElementById('canvasLHPtwo');
    if (theCanvasR2C1 && theCanvasR2C1.getContext) {
        var context = theCanvasR2C1.getContext("2d");
        if (context) {
            //main field shape and bg color
            context.fillStyle = "rgb(255,255,255)";
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.fill();

            //5 divisions row 1
            //box 1
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(1, 157);
            context.lineTo(26, 181);
            context.bezierCurveTo(52, 155, 82, 133, 115, 116);
            context.lineTo(100, 85);
            context.bezierCurveTo(64, 103, 31, 127, 1, 157);
            context.fill();

            //box 2
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(100, 85);
            context.lineTo(115, 116);
            context.bezierCurveTo(148, 100, 183, 88, 221, 82);
            context.lineTo(215, 47);
            context.bezierCurveTo(175, 54, 136, 66, 100, 85);
            context.fill();

            //box3
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(215, 47);
            context.lineTo(221, 82);
            context.bezierCurveTo(239, 79, 257, 78, 276, 78);
            context.bezierCurveTo(295, 78, 313, 79, 331, 82);
            context.lineTo(337, 47);
            context.bezierCurveTo(297, 41, 256, 41, 215, 47);
            context.fill();

            //box4
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(337, 47);
            context.lineTo(331, 82);
            context.bezierCurveTo(369, 88, 404, 100, 437, 116);
            context.lineTo(452, 85);
            context.bezierCurveTo(416, 66, 377, 54, 337, 47);
            context.fill();

            //box5
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(550, 157);
            context.bezierCurveTo(521, 127, 488, 103, 452, 85);
            context.lineTo(437, 116);
            context.bezierCurveTo(470, 133, 500, 155, 526, 181);
            context.lineTo(550, 157);
            context.fill();

            //9 divisions row 2
            //take note last value for rgba can also be in decimals
            //the full value below is 255
            //box6
            context.fillStyle = "rgba(255,46,58,.0)";
            context.beginPath();
            context.moveTo(73, 142);
            context.bezierCurveTo(56, 153, 41, 166, 26, 181);
            context.lineTo(62, 218);
            context.bezierCurveTo(75, 205, 88, 194, 103, 184);
            context.lineTo(73, 142);
            context.fill();

            //box7
            context.fillStyle = "rgba(255,46,58,.5)";
            context.beginPath();
            context.moveTo(126, 111);
            context.bezierCurveTo(108, 119, 90, 130, 73, 142);
            context.lineTo(103, 184);
            context.bezierCurveTo(117, 174, 132, 165, 148, 157);
            context.lineTo(126, 111);
            context.fill();

            //box8
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(184, 89);
            context.bezierCurveTo(165, 95, 145, 102, 126, 111);
            context.lineTo(148, 157);
            context.bezierCurveTo(164, 150, 181, 144, 198, 139);
            context.lineTo(184, 89);
            context.fill();

            //box9
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(245, 79);
            context.bezierCurveTo(225, 81, 204, 84, 184, 89);
            context.lineTo(198, 139);
            context.bezierCurveTo(215, 135, 232, 132, 250, 130);
            context.lineTo(245, 79);
            context.fill();

            //box10
            context.fillStyle = "rgba(255,46,58,.85)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(307, 79);
            context.bezierCurveTo(286, 77, 266, 77, 245, 79);
            context.lineTo(250, 130);
            context.bezierCurveTo(267, 129, 285, 129, 302, 130);
            context.fill();

            //box11
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(368, 90);
            context.bezierCurveTo(348, 84, 327, 81, 307, 79);
            context.lineTo(302, 130);
            context.bezierCurveTo(320, 132, 337, 135, 354, 139);
            context.lineTo(368, 90);
            context.fill();

            //box12
            context.fillStyle = "rgba(255,46,58,.0)";
            context.beginPath();
            context.moveTo(426, 111);
            context.bezierCurveTo(407, 102, 387, 95, 368, 90);
            context.lineTo(354, 139);
            context.bezierCurveTo(371, 144, 388, 150, 404, 158);
            context.lineTo(426, 111);
            context.fill();

            //box13
            context.fillStyle = "rgba(255,46,58,.5)";
            context.beginPath();
            context.moveTo(479, 142);
            context.bezierCurveTo(462, 130, 444, 119, 426, 111);
            context.lineTo(404, 158);
            context.bezierCurveTo(420, 165, 435, 174, 449, 184);
            context.lineTo(479, 142);
            context.fill();

            //box14
            context.fillStyle = "rgba(255,46,58,.0)";
            context.beginPath();
            context.moveTo(479, 142);
            context.lineTo(449, 184);
            context.bezierCurveTo(463, 194, 477, 205, 489, 218);
            context.lineTo(526, 181);
            context.bezierCurveTo(511, 167, 495, 153, 479, 142);
            context.fill();

            //9 divisions row 3
            //box15
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(103, 184);
            context.lineTo(160, 266);
            context.bezierCurveTo(170, 259, 180, 253, 191, 248);
            context.lineTo(148, 157);
            context.bezierCurveTo(132, 165, 117, 174, 103, 184);
            context.fill();

            //box16
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.lineTo(103, 184);
            context.bezierCurveTo(88, 194, 75, 205, 62, 218);
            context.lineTo(133, 289);
            context.bezierCurveTo(141, 280, 150, 273, 160, 266);
            context.fill();

            ////box17
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(148, 157);
            context.lineTo(191, 248);
            context.bezierCurveTo(201, 243, 212, 239, 224, 236);
            context.lineTo(198, 139);
            context.bezierCurveTo(181, 144, 164, 150, 148, 157);
            context.fill();


            //box18
            context.fillStyle = "rgba(255,46,58,.4)";
            context.beginPath();
            context.moveTo(198, 139);
            context.lineTo(224, 236);
            context.bezierCurveTo(235, 233, 247, 231, 258, 230);
            context.lineTo(250, 130);
            context.bezierCurveTo(232, 132, 215, 135, 198, 139);
            context.fill();


            //box19
            context.fillStyle = "rgba(255,46,58,.8)";
            context.beginPath();
            context.moveTo(250, 130);
            context.lineTo(258, 230);
            context.bezierCurveTo(264, 230, 270, 230, 276, 230);
            context.bezierCurveTo(282, 230, 288, 230, 294, 230);
            context.lineTo(302, 130);
            context.bezierCurveTo(285, 129, 267, 129, 250, 130);
            context.fill();

            //box20
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(294, 230);
            context.bezierCurveTo(306, 231, 317, 233, 328, 236);
            context.lineTo(354, 139);
            context.bezierCurveTo(337, 135, 320, 132, 302, 130);
            context.fill();

            //box21
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(354, 139);
            context.lineTo(328, 236);
            context.bezierCurveTo(340, 240, 351, 244, 361, 249);
            context.lineTo(404, 158);
            context.bezierCurveTo(388, 150, 371, 144, 354, 139);
            context.fill();

            //box22
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(404, 158);
            context.lineTo(361, 249);
            context.bezierCurveTo(372, 254, 382, 260, 392, 266);
            context.lineTo(449, 184);
            context.bezierCurveTo(435, 174, 420, 165, 404, 158);
            context.fill();

            //box23
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(489, 218);
            context.bezierCurveTo(477, 205, 463, 194, 449, 184);
            context.lineTo(392, 266);
            context.bezierCurveTo(401, 273, 410, 280, 418, 289);
            context.lineTo(489, 218);
            context.fill();


            //9 divisions row 4
            //box24
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.bezierCurveTo(150, 273, 141, 280, 133, 289);
            context.lineTo(151, 307);
            context.lineTo(164, 320);
            context.bezierCurveTo(171, 314, 178, 308, 186, 302);
            context.lineTo(175, 287);
            context.lineTo(160, 266);
            context.fill();

            //box25
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(191, 248);
            context.bezierCurveTo(180, 253, 170, 259, 160, 266);
            context.lineTo(175, 287);
            context.lineTo(186, 302);
            context.bezierCurveTo(193, 297, 201, 293, 209, 289);
            context.lineTo(201, 271);
            context.lineTo(191, 248);
            context.fill();

            ////box26
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(224, 236);
            context.bezierCurveTo(212, 239, 201, 243, 191, 248);
            context.lineTo(201, 271);
            context.lineTo(209, 289);
            context.bezierCurveTo(218, 285, 226, 282, 235, 279);
            context.lineTo(230, 261);
            context.lineTo(224, 236);
            context.fill();

            //box27
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(258, 230);
            context.bezierCurveTo(247, 231, 235, 233, 224, 236);
            context.lineTo(230, 261);
            context.lineTo(235, 279);
            context.bezierCurveTo(244, 277, 253, 275, 262, 275);
            context.lineTo(261, 256);
            context.lineTo(258, 230);
            context.fill();

            //box28
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(294, 230);
            context.bezierCurveTo(288, 230, 282, 230, 276, 230);
            context.bezierCurveTo(270, 230, 264, 230, 258, 230);
            context.lineTo(261, 256);
            context.lineTo(262, 275);
            context.bezierCurveTo(267, 274, 271, 274, 276, 274);
            context.bezierCurveTo(280, 274, 285, 274, 290, 275);
            context.lineTo(291, 256);
            context.lineTo(294, 230);
            context.fill();

            //box29
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(328, 236);
            context.bezierCurveTo(317, 233, 306, 231, 294, 230);
            context.lineTo(291, 256);
            context.lineTo(290, 275);
            context.bezierCurveTo(299, 276, 308, 277, 317, 279);
            context.lineTo(322, 261);
            context.lineTo(328, 236);
            context.fill();

            //box30
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(361, 249);
            context.bezierCurveTo(351, 244, 340, 240, 328, 236);
            context.lineTo(322, 261);
            context.lineTo(317, 279);
            context.bezierCurveTo(326, 282, 334, 285, 343, 289);
            context.lineTo(351, 272);
            context.lineTo(361, 249);
            context.fill();

            //box31
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(392, 266);
            context.bezierCurveTo(382, 260, 372, 254, 361, 249);
            context.lineTo(351, 272);
            context.lineTo(343, 289);
            context.bezierCurveTo(351, 293, 359, 297, 366, 303);
            context.lineTo(377, 287);
            context.lineTo(392, 266);
            context.fill();

            //box32
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(387, 320);
            context.lineTo(400, 307);
            context.lineTo(418, 289);
            context.bezierCurveTo(410, 280, 401, 273, 392, 266);
            context.lineTo(377, 287);
            context.lineTo(366, 303);
            context.bezierCurveTo(374, 308, 381, 314, 387, 320);
            context.fill();

            //9 divisions row 5
            //box33
            context.fillStyle = "rgba(255,46,58,.8)";
            context.beginPath();
            context.moveTo(164, 320);
            context.lineTo(182, 337);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(200, 322);
            context.lineTo(186, 302);
            context.bezierCurveTo(178, 308, 171, 314, 164, 320);
            context.fill();

            //box34
            context.fillStyle = "rgba(255,46,58,1)";
            context.beginPath();
            context.moveTo(200, 322);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(220, 311);
            context.lineTo(209, 289);
            context.bezierCurveTo(201, 293, 193, 297, 186, 302);
            context.lineTo(200, 322);
            context.fill();

            //box35
            context.fillStyle = "rgba(255,46,58,.8)";
            context.beginPath();
            context.moveTo(220, 311);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(242, 303);
            context.lineTo(235, 279);
            context.bezierCurveTo(226, 282, 218, 285, 209, 289);
            context.lineTo(220, 311);
            context.fill();

            //box36
            context.fillStyle = "rgba(255,46,58,1)";
            context.beginPath();
            context.moveTo(242, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(264, 299);
            context.lineTo(262, 275);
            context.bezierCurveTo(253, 275, 244, 277, 235, 279);
            context.lineTo(242, 303);
            context.fill();

            //box37
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(262, 275);
            context.lineTo(264, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(288, 299);
            context.lineTo(290, 275);
            context.bezierCurveTo(285, 274, 280, 274, 276, 274);
            context.bezierCurveTo(271, 274, 267, 274, 262, 275);
            context.fill();

            //box38
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(288, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(310, 303);
            context.lineTo(317, 279);
            context.bezierCurveTo(308, 277, 299, 276, 290, 275);
            context.lineTo(288, 299);
            context.fill();

            //box39
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(310, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(332, 311);
            context.lineTo(343, 289);
            context.bezierCurveTo(334, 285, 326, 282, 317, 279);
            context.lineTo(310, 303);
            context.fill();

            //box40
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(332, 311);
            context.lineTo(276, 431);
            context.lineTo(277, 430);
            context.lineTo(352, 323);
            context.lineTo(366, 303);
            context.bezierCurveTo(359, 297, 351, 293, 343, 289);
            context.lineTo(332, 311);
            context.fill();

            //box41
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(366, 303);
            context.lineTo(352, 323);
            context.lineTo(277, 430);
            context.lineTo(370, 337);
            context.lineTo(387, 320);
            context.bezierCurveTo(381, 314, 374, 308, 366, 303);
            context.fill();



            //lines do not edit
            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(61, 217);
            context.lineTo(63, 219);
            context.bezierCurveTo(63, 218, 64, 217, 64, 217);
            context.lineTo(63, 215);
            context.bezierCurveTo(62, 216, 62, 217, 61, 217);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 141);
            context.lineTo(189, 143);
            context.bezierCurveTo(191, 142, 192, 142, 194, 141);
            context.lineTo(193, 139);
            context.bezierCurveTo(192, 140, 190, 140, 188, 141);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(208, 136);
            context.lineTo(209, 138);
            context.bezierCurveTo(210, 137, 212, 137, 213, 137);
            context.lineTo(213, 135);
            context.bezierCurveTo(211, 135, 210, 135, 208, 136);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(198, 138);
            context.lineTo(199, 140);
            context.bezierCurveTo(200, 140, 202, 139, 204, 139);
            context.lineTo(203, 137);
            context.bezierCurveTo(201, 137, 200, 138, 198, 138);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 144);
            context.lineTo(179, 146);
            context.bezierCurveTo(181, 145, 183, 145, 184, 144);
            context.lineTo(184, 142);
            context.bezierCurveTo(182, 143, 180, 143, 179, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(218, 134);
            context.lineTo(218, 136);
            context.bezierCurveTo(220, 135, 222, 135, 223, 135);
            context.lineTo(223, 133);
            context.bezierCurveTo(221, 133, 220, 133, 218, 134);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(248, 129);
            context.lineTo(248, 131);
            context.bezierCurveTo(250, 131, 252, 131, 253, 131);
            context.lineTo(253, 129);
            context.bezierCurveTo(251, 129, 250, 129, 248, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(160, 151);
            context.lineTo(161, 153);
            context.bezierCurveTo(162, 152, 164, 152, 165, 151);
            context.lineTo(164, 149);
            context.bezierCurveTo(163, 150, 161, 150, 160, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(258, 129);
            context.lineTo(258, 131);
            context.bezierCurveTo(260, 130, 262, 130, 263, 130);
            context.lineTo(263, 128);
            context.bezierCurveTo(262, 128, 260, 128, 258, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(238, 130);
            context.lineTo(238, 132);
            context.bezierCurveTo(240, 132, 242, 132, 243, 132);
            context.lineTo(243, 130);
            context.bezierCurveTo(241, 130, 240, 130, 238, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(228, 132);
            context.lineTo(228, 134);
            context.bezierCurveTo(230, 134, 232, 133, 233, 133);
            context.lineTo(233, 131);
            context.bezierCurveTo(231, 131, 230, 132, 228, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(132, 164);
            context.lineTo(133, 166);
            context.bezierCurveTo(135, 165, 136, 164, 138, 164);
            context.lineTo(137, 162);
            context.bezierCurveTo(135, 163, 134, 163, 132, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(82, 198);
            context.lineTo(83, 200);
            context.bezierCurveTo(84, 199, 86, 198, 87, 197);
            context.lineTo(86, 195);
            context.bezierCurveTo(84, 196, 83, 197, 82, 198);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(90, 192);
            context.lineTo(91, 194);
            context.bezierCurveTo(92, 193, 94, 191, 95, 190);
            context.lineTo(94, 189);
            context.bezierCurveTo(92, 190, 91, 191, 90, 192);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(150, 155);
            context.lineTo(151, 157);
            context.bezierCurveTo(153, 156, 154, 156, 156, 155);
            context.lineTo(155, 153);
            context.bezierCurveTo(154, 154, 152, 154, 150, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(98, 186);
            context.lineTo(99, 187);
            context.bezierCurveTo(100, 186, 102, 186, 103, 185);
            context.lineTo(102, 183);
            context.bezierCurveTo(101, 184, 99, 185, 98, 186);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(74, 205);
            context.lineTo(76, 206);
            context.bezierCurveTo(77, 205, 78, 204, 79, 203);
            context.lineTo(78, 202);
            context.bezierCurveTo(77, 203, 75, 204, 74, 205);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(67, 212);
            context.lineTo(68, 213);
            context.bezierCurveTo(69, 212, 71, 211, 72, 210);
            context.lineTo(70, 208);
            context.bezierCurveTo(69, 210, 68, 211, 67, 212);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(106, 180);
            context.lineTo(107, 182);
            context.bezierCurveTo(109, 181, 110, 180, 112, 179);
            context.lineTo(110, 177);
            context.bezierCurveTo(109, 178, 108, 179, 106, 180);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(268, 128);
            context.lineTo(268, 130);
            context.bezierCurveTo(270, 130, 272, 130, 273, 130);
            context.lineTo(273, 128);
            context.bezierCurveTo(272, 128, 270, 128, 268, 128);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(141, 160);
            context.lineTo(142, 161);
            context.bezierCurveTo(144, 161, 145, 160, 147, 159);
            context.lineTo(146, 157);
            context.bezierCurveTo(144, 158, 143, 159, 141, 160);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(123, 169);
            context.lineTo(124, 171);
            context.bezierCurveTo(126, 170, 127, 169, 129, 168);
            context.lineTo(128, 167);
            context.bezierCurveTo(126, 167, 125, 168, 123, 169);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(115, 174);
            context.lineTo(116, 176);
            context.bezierCurveTo(117, 175, 119, 174, 120, 173);
            context.lineTo(119, 172);
            context.bezierCurveTo(118, 173, 116, 174, 115, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(169, 147);
            context.lineTo(170, 149);
            context.bezierCurveTo(172, 149, 173, 148, 175, 148);
            context.lineTo(174, 146);
            context.bezierCurveTo(172, 146, 171, 147, 169, 147);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(431, 174);
            context.bezierCurveTo(433, 174, 434, 175, 436, 176);
            context.lineTo(437, 174);
            context.bezierCurveTo(435, 174, 434, 173, 433, 172);
            context.lineTo(431, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(440, 179);
            context.bezierCurveTo(441, 180, 443, 181, 444, 182);
            context.lineTo(445, 180);
            context.bezierCurveTo(444, 179, 442, 178, 441, 177);
            context.lineTo(440, 179);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(423, 168);
            context.bezierCurveTo(424, 169, 426, 170, 427, 171);
            context.lineTo(428, 169);
            context.bezierCurveTo(427, 168, 425, 168, 424, 167);
            context.lineTo(423, 168);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 159);
            context.bezierCurveTo(406, 160, 408, 161, 409, 161);
            context.lineTo(410, 160);
            context.bezierCurveTo(409, 159, 407, 158, 406, 157);
            context.lineTo(405, 159);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(414, 164);
            context.bezierCurveTo(415, 164, 417, 165, 418, 166);
            context.lineTo(419, 164);
            context.bezierCurveTo(418, 163, 416, 163, 415, 162);
            context.lineTo(414, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(396, 155);
            context.bezierCurveTo(397, 156, 399, 156, 400, 157);
            context.lineTo(401, 155);
            context.bezierCurveTo(400, 155, 398, 154, 397, 153);
            context.lineTo(396, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 130);
            context.bezierCurveTo(280, 130, 282, 130, 284, 130);
            context.lineTo(284, 128);
            context.bezierCurveTo(282, 128, 280, 128, 278, 128);
            context.lineTo(278, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(480, 210);
            context.bezierCurveTo(481, 211, 482, 212, 483, 213);
            context.lineTo(485, 212);
            context.bezierCurveTo(483, 211, 482, 209, 481, 208);
            context.lineTo(480, 210);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(456, 190);
            context.bezierCurveTo(458, 191, 459, 192, 460, 193);
            context.lineTo(462, 192);
            context.bezierCurveTo(460, 191, 459, 190, 458, 189);
            context.lineTo(456, 190);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(448, 185);
            context.bezierCurveTo(450, 185, 451, 186, 452, 187);
            context.lineTo(454, 186);
            context.bezierCurveTo(452, 185, 451, 184, 449, 183);
            context.lineTo(448, 185);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(464, 197);
            context.bezierCurveTo(466, 198, 467, 199, 468, 200);
            context.lineTo(470, 198);
            context.bezierCurveTo(468, 197, 467, 196, 466, 195);
            context.lineTo(464, 197);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(472, 203);
            context.bezierCurveTo(473, 204, 475, 205, 476, 206);
            context.lineTo(477, 205);
            context.bezierCurveTo(476, 204, 475, 203, 473, 202);
            context.lineTo(472, 203);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(319, 133);
            context.bezierCurveTo(320, 133, 322, 134, 324, 134);
            context.lineTo(324, 132);
            context.bezierCurveTo(322, 132, 321, 131, 319, 131);
            context.lineTo(319, 133);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(309, 132);
            context.bezierCurveTo(310, 132, 312, 132, 314, 132);
            context.lineTo(314, 130);
            context.bezierCurveTo(312, 130, 311, 130, 309, 130);
            context.lineTo(309, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(289, 130);
            context.bezierCurveTo(290, 130, 292, 131, 294, 131);
            context.lineTo(294, 129);
            context.bezierCurveTo(292, 129, 290, 128, 289, 128);
            context.lineTo(289, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(387, 151);
            context.bezierCurveTo(388, 152, 390, 152, 391, 153);
            context.lineTo(392, 151);
            context.bezierCurveTo(390, 151, 389, 150, 387, 149);
            context.lineTo(387, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(299, 131);
            context.bezierCurveTo(300, 131, 302, 131, 304, 131);
            context.lineTo(304, 129);
            context.bezierCurveTo(302, 129, 300, 129, 299, 129);
            context.lineTo(299, 131);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(329, 135);
            context.bezierCurveTo(330, 135, 332, 135, 333, 136);
            context.lineTo(334, 134);
            context.bezierCurveTo(332, 133, 331, 133, 329, 133);
            context.lineTo(329, 135);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(368, 144);
            context.bezierCurveTo(369, 145, 371, 145, 372, 146);
            context.lineTo(373, 144);
            context.bezierCurveTo(371, 144, 370, 143, 368, 143);
            context.lineTo(368, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(377, 148);
            context.bezierCurveTo(379, 148, 380, 149, 382, 149);
            context.lineTo(383, 148);
            context.bezierCurveTo(381, 147, 379, 146, 378, 146);
            context.lineTo(377, 148);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(348, 139);
            context.bezierCurveTo(350, 139, 351, 140, 353, 140);
            context.lineTo(354, 138);
            context.bezierCurveTo(352, 138, 350, 137, 349, 137);
            context.lineTo(348, 139);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(358, 142);
            context.bezierCurveTo(360, 142, 361, 142, 363, 143);
            context.lineTo(363, 141);
            context.bezierCurveTo(362, 141, 360, 140, 359, 140);
            context.lineTo(358, 142);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(338, 137);
            context.bezierCurveTo(340, 137, 342, 137, 343, 138);
            context.lineTo(344, 136);
            context.bezierCurveTo(342, 135, 340, 135, 339, 135);
            context.lineTo(338, 137);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(487, 217);
            context.bezierCurveTo(488, 217, 488, 218, 489, 219);
            context.lineTo(490, 217);
            context.bezierCurveTo(490, 217, 489, 216, 488, 215);
            context.lineTo(487, 217);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(26, 181);
            context.bezierCurveTo(164, 43, 387, 43, 526, 181);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(437, 116);
            context.lineTo(453, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(331, 82);
            context.lineTo(337, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(221, 82);
            context.lineTo(215, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(115, 116);
            context.lineTo(100, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(164, 320);
            context.bezierCurveTo(226, 259, 325, 259, 387, 320);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(134, 290);
            context.lineTo(132, 288);
            context.bezierCurveTo(133, 288, 133, 287, 134, 286);
            context.lineTo(135, 288);
            context.bezierCurveTo(135, 288, 134, 289, 134, 290);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(139, 284);
            context.lineTo(138, 283);
            context.bezierCurveTo(139, 282, 140, 281, 141, 280);
            context.lineTo(143, 281);
            context.bezierCurveTo(141, 282, 140, 283, 139, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(412, 284);
            context.bezierCurveTo(411, 283, 410, 282, 409, 281);
            context.lineTo(410, 279);
            context.bezierCurveTo(411, 281, 412, 282, 414, 283);
            context.lineTo(412, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(146, 278);
            context.lineTo(145, 276);
            context.bezierCurveTo(146, 275, 148, 274, 149, 273);
            context.lineTo(150, 275);
            context.bezierCurveTo(149, 276, 148, 277, 146, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 278);
            context.bezierCurveTo(404, 277, 402, 276, 401, 275);
            context.lineTo(402, 273);
            context.bezierCurveTo(404, 274, 405, 275, 406, 276);
            context.lineTo(405, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(154, 272);
            context.lineTo(153, 270);
            context.bezierCurveTo(154, 269, 156, 268, 157, 267);
            context.lineTo(158, 269);
            context.bezierCurveTo(157, 270, 155, 271, 154, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(397, 272);
            context.bezierCurveTo(396, 271, 395, 270, 393, 269);
            context.lineTo(395, 267);
            context.bezierCurveTo(396, 268, 397, 269, 399, 270);
            context.lineTo(397, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(162, 266);
            context.lineTo(161, 264);
            context.bezierCurveTo(162, 263, 164, 262, 165, 261);
            context.lineTo(166, 263);
            context.bezierCurveTo(165, 264, 163, 265, 162, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(389, 266);
            context.bezierCurveTo(388, 265, 387, 264, 385, 263);
            context.lineTo(386, 261);
            context.bezierCurveTo(388, 262, 389, 263, 390, 264);
            context.lineTo(389, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(381, 260);
            context.bezierCurveTo(380, 260, 378, 259, 377, 258);
            context.lineTo(378, 256);
            context.bezierCurveTo(379, 257, 381, 258, 382, 259);
            context.lineTo(381, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(170, 260);
            context.lineTo(169, 259);
            context.bezierCurveTo(171, 258, 172, 257, 174, 256);
            context.lineTo(175, 258);
            context.bezierCurveTo(173, 259, 172, 260, 170, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(373, 255);
            context.bezierCurveTo(371, 255, 370, 254, 368, 253);
            context.lineTo(369, 251);
            context.bezierCurveTo(371, 252, 372, 253, 374, 254);
            context.lineTo(373, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 255);
            context.lineTo(178, 254);
            context.bezierCurveTo(179, 253, 181, 252, 182, 251);
            context.lineTo(183, 253);
            context.bezierCurveTo(182, 254, 180, 255, 179, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(364, 251);
            context.bezierCurveTo(362, 250, 361, 249, 359, 249);
            context.lineTo(360, 247);
            context.bezierCurveTo(362, 248, 363, 248, 365, 249);
            context.lineTo(364, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 251);
            context.lineTo(187, 249);
            context.bezierCurveTo(188, 248, 190, 248, 191, 247);
            context.lineTo(192, 249);
            context.bezierCurveTo(191, 249, 189, 250, 188, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(355, 247);
            context.bezierCurveTo(353, 246, 352, 246, 350, 245);
            context.lineTo(351, 243);
            context.bezierCurveTo(353, 244, 354, 244, 356, 245);
            context.lineTo(355, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(197, 247);
            context.lineTo(196, 245);
            context.bezierCurveTo(197, 244, 199, 244, 200, 243);
            context.lineTo(201, 245);
            context.bezierCurveTo(200, 245, 198, 246, 197, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(346, 243);
            context.bezierCurveTo(344, 243, 343, 242, 341, 241);
            context.lineTo(342, 240);
            context.bezierCurveTo(343, 240, 345, 241, 346, 241);
            context.lineTo(346, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(206, 243);
            context.lineTo(205, 241);
            context.bezierCurveTo(207, 241, 208, 240, 210, 240);
            context.lineTo(210, 241);
            context.bezierCurveTo(209, 242, 207, 243, 206, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(336, 240);
            context.bezierCurveTo(335, 239, 333, 239, 332, 238);
            context.lineTo(332, 237);
            context.bezierCurveTo(334, 237, 335, 238, 337, 238);
            context.lineTo(336, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(215, 240);
            context.lineTo(215, 238);
            context.bezierCurveTo(216, 237, 218, 237, 219, 237);
            context.lineTo(220, 238);
            context.bezierCurveTo(218, 239, 217, 239, 215, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(327, 237);
            context.bezierCurveTo(325, 237, 324, 236, 322, 236);
            context.lineTo(323, 234);
            context.bezierCurveTo(324, 234, 326, 235, 328, 235);
            context.lineTo(327, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(225, 237);
            context.lineTo(224, 235);
            context.bezierCurveTo(226, 235, 227, 234, 229, 234);
            context.lineTo(229, 236);
            context.bezierCurveTo(228, 236, 226, 237, 225, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(317, 235);
            context.bezierCurveTo(316, 235, 314, 234, 313, 234);
            context.lineTo(313, 232);
            context.bezierCurveTo(315, 232, 316, 233, 318, 233);
            context.lineTo(317, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(234, 235);
            context.lineTo(234, 233);
            context.bezierCurveTo(235, 233, 237, 232, 239, 232);
            context.lineTo(239, 234);
            context.bezierCurveTo(237, 234, 236, 235, 234, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(308, 233);
            context.bezierCurveTo(306, 233, 304, 233, 303, 232);
            context.lineTo(303, 230);
            context.bezierCurveTo(305, 231, 306, 231, 308, 231);
            context.lineTo(308, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(244, 233);
            context.lineTo(244, 231);
            context.bezierCurveTo(245, 231, 247, 231, 249, 230);
            context.lineTo(249, 232);
            context.bezierCurveTo(247, 233, 246, 233, 244, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(298, 232);
            context.bezierCurveTo(296, 232, 295, 231, 293, 231);
            context.lineTo(293, 229);
            context.bezierCurveTo(295, 229, 297, 230, 298, 230);
            context.lineTo(298, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(254, 232);
            context.lineTo(253, 230);
            context.bezierCurveTo(255, 230, 257, 229, 258, 229);
            context.lineTo(259, 231);
            context.bezierCurveTo(257, 231, 255, 232, 254, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(288, 231);
            context.bezierCurveTo(287, 231, 285, 231, 283, 231);
            context.lineTo(283, 229);
            context.bezierCurveTo(285, 229, 287, 229, 288, 229);
            context.lineTo(288, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(264, 231);
            context.lineTo(263, 229);
            context.bezierCurveTo(265, 229, 267, 229, 268, 229);
            context.lineTo(268, 231);
            context.bezierCurveTo(267, 231, 265, 231, 264, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 231);
            context.bezierCurveTo(277, 231, 275, 231, 273, 231);
            context.lineTo(273, 229);
            context.bezierCurveTo(275, 229, 277, 229, 278, 229);
            context.lineTo(278, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(418, 289);
            context.bezierCurveTo(417, 289, 417, 288, 416, 288);
            context.lineTo(417, 286);
            context.bezierCurveTo(418, 287, 419, 287, 419, 288);
            context.lineTo(418, 289);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(479, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(425, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(367, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(307, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(245, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(184, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(126, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(72, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 45);
            context.bezierCurveTo(521, 48, 519, 50, 516, 50);
            context.lineTo(404, 50);
            context.bezierCurveTo(401, 50, 399, 48, 399, 45);
            context.lineTo(399, 17);
            context.bezierCurveTo(399, 14, 401, 12, 404, 12);
            context.lineTo(516, 12);
            context.bezierCurveTo(519, 12, 521, 14, 521, 17);
            context.lineTo(521, 45);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 345);
            context.bezierCurveTo(521, 348, 519, 350, 516, 350);
            context.lineTo(404, 350);
            context.bezierCurveTo(401, 350, 399, 348, 399, 345);
            context.lineTo(399, 317);
            context.bezierCurveTo(399, 314, 401, 312, 404, 312);
            context.lineTo(516, 312);
            context.bezierCurveTo(519, 312, 521, 314, 521, 317);
            context.lineTo(521, 345);
            context.stroke();








            //end of lines

            //textbox for text

            context.font = "24px calibri";
            context.fillText("197 OF BIP", 407, 39);
            context.textAlign = "center";

            context.font = "24px calibri";
            context.fillText("197 IF BIP", 457, 340);
            context.textAlign = "center";

            //outer row
            //text 1
            context.font = "24px calibri";
            context.fillText("28%", 70, 85);

            //text 2
            context.font = "24px calibri";
            context.fillText("46%", 279, 35);

            //text 3
            context.font = "24px calibri";
            context.fillText("27%", 485, 85);

            //5 divisons row 1
            //text 1
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 60, 138);

            //text 2
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 165, 85);

            //text 3
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 275, 65);

            //text 4
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 390, 85);

            //text 5
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 490, 138);

            //9 divisons row 2
            //text 6
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 65, 190);

            //text 7
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 113, 158);

            //text 8
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 165, 133);

            //text 9
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 217, 115);

            //text 10
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("16", 275, 110);

            //text 11
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 333, 115);

            //text 12
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 387, 133);

            //text 13
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 438, 155);

            //text 14
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 485, 190);

            //9 divisons row 3
            //text 15
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 100, 230);

            //text 16
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 140, 205);

            //text 17 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 185, 185);

            //text 18
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 228, 170);

            //text 19
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("10", 275, 163);

            //text 20
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 323, 170);

            //text 21
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 370, 185);

            //text 22
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 410, 205);

            //text 23
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 450, 230);

            //9 divisons row 4
            //text 24
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 157, 300);

            //text 25
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 187, 285);

            //text 26 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 215, 270);

            //text 27
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 245, 260);

            //text 28
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 275, 255);

            //text 29
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 308, 260);

            //text 30
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 335, 270);

            //text 31
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 364, 285);

            //text 32
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 393, 300);

            //9 divisons row 5
            //text 33
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("18", 183, 330);

            //text 34
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("27", 203, 315);

            //text 35 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("17", 226, 305);

            //text 36
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("21", 252, 297);

            //text 37
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 275, 295);

            //text 38
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 300, 297);

            //text 39
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 325, 305);

            //text 40
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 347, 315);

            //text 41
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("1", 367, 330);

        }
    }


    var theCanvasR2C2 = document.getElementById('canvasRHPtwo');
    if (theCanvasR2C2 && theCanvasR2C2.getContext) {
        var context = theCanvasR2C2.getContext("2d");
        if (context) {
            //main field shape and bg color
            context.fillStyle = "rgb(255,255,255)";
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.fill();

            //5 divisions row 1
            //box 1
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(1, 157);
            context.lineTo(26, 181);
            context.bezierCurveTo(52, 155, 82, 133, 115, 116);
            context.lineTo(100, 85);
            context.bezierCurveTo(64, 103, 31, 127, 1, 157);
            context.fill();

            //box 2
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(100, 85);
            context.lineTo(115, 116);
            context.bezierCurveTo(148, 100, 183, 88, 221, 82);
            context.lineTo(215, 47);
            context.bezierCurveTo(175, 54, 136, 66, 100, 85);
            context.fill();

            //box3
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(215, 47);
            context.lineTo(221, 82);
            context.bezierCurveTo(239, 79, 257, 78, 276, 78);
            context.bezierCurveTo(295, 78, 313, 79, 331, 82);
            context.lineTo(337, 47);
            context.bezierCurveTo(297, 41, 256, 41, 215, 47);
            context.fill();

            //box4
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(337, 47);
            context.lineTo(331, 82);
            context.bezierCurveTo(369, 88, 404, 100, 437, 116);
            context.lineTo(452, 85);
            context.bezierCurveTo(416, 66, 377, 54, 337, 47);
            context.fill();

            //box5
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(550, 157);
            context.bezierCurveTo(521, 127, 488, 103, 452, 85);
            context.lineTo(437, 116);
            context.bezierCurveTo(470, 133, 500, 155, 526, 181);
            context.lineTo(550, 157);
            context.fill();

            //9 divisions row 2
            //take note last value for rgba can also be in decimals
            //the full value below is 255
            //box6
            context.fillStyle = "rgba(0,179,255,.0)";
            context.beginPath();
            context.moveTo(73, 142);
            context.bezierCurveTo(56, 153, 41, 166, 26, 181);
            context.lineTo(62, 218);
            context.bezierCurveTo(75, 205, 88, 194, 103, 184);
            context.lineTo(73, 142);
            context.fill();

            //box7
            context.fillStyle = "rgba(0,179,255,.5)";
            context.beginPath();
            context.moveTo(126, 111);
            context.bezierCurveTo(108, 119, 90, 130, 73, 142);
            context.lineTo(103, 184);
            context.bezierCurveTo(117, 174, 132, 165, 148, 157);
            context.lineTo(126, 111);
            context.fill();

            //box8
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(184, 89);
            context.bezierCurveTo(165, 95, 145, 102, 126, 111);
            context.lineTo(148, 157);
            context.bezierCurveTo(164, 150, 181, 144, 198, 139);
            context.lineTo(184, 89);
            context.fill();

            //box9
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(245, 79);
            context.bezierCurveTo(225, 81, 204, 84, 184, 89);
            context.lineTo(198, 139);
            context.bezierCurveTo(215, 135, 232, 132, 250, 130);
            context.lineTo(245, 79);
            context.fill();

            //box10
            context.fillStyle = "rgba(0,179,255,.85)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(307, 79);
            context.bezierCurveTo(286, 77, 266, 77, 245, 79);
            context.lineTo(250, 130);
            context.bezierCurveTo(267, 129, 285, 129, 302, 130);
            context.fill();

            //box11
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(368, 90);
            context.bezierCurveTo(348, 84, 327, 81, 307, 79);
            context.lineTo(302, 130);
            context.bezierCurveTo(320, 132, 337, 135, 354, 139);
            context.lineTo(368, 90);
            context.fill();

            //box12
            context.fillStyle = "rgba(0,179,255,.0)";
            context.beginPath();
            context.moveTo(426, 111);
            context.bezierCurveTo(407, 102, 387, 95, 368, 90);
            context.lineTo(354, 139);
            context.bezierCurveTo(371, 144, 388, 150, 404, 158);
            context.lineTo(426, 111);
            context.fill();

            //box13
            context.fillStyle = "rgba(0,179,255,.5)";
            context.beginPath();
            context.moveTo(479, 142);
            context.bezierCurveTo(462, 130, 444, 119, 426, 111);
            context.lineTo(404, 158);
            context.bezierCurveTo(420, 165, 435, 174, 449, 184);
            context.lineTo(479, 142);
            context.fill();

            //box14
            context.fillStyle = "rgba(0,179,255,.0)";
            context.beginPath();
            context.moveTo(479, 142);
            context.lineTo(449, 184);
            context.bezierCurveTo(463, 194, 477, 205, 489, 218);
            context.lineTo(526, 181);
            context.bezierCurveTo(511, 167, 495, 153, 479, 142);
            context.fill();

            //9 divisions row 3
            //box15
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(103, 184);
            context.lineTo(160, 266);
            context.bezierCurveTo(170, 259, 180, 253, 191, 248);
            context.lineTo(148, 157);
            context.bezierCurveTo(132, 165, 117, 174, 103, 184);
            context.fill();

            //box16
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.lineTo(103, 184);
            context.bezierCurveTo(88, 194, 75, 205, 62, 218);
            context.lineTo(133, 289);
            context.bezierCurveTo(141, 280, 150, 273, 160, 266);
            context.fill();

            ////box17
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(148, 157);
            context.lineTo(191, 248);
            context.bezierCurveTo(201, 243, 212, 239, 224, 236);
            context.lineTo(198, 139);
            context.bezierCurveTo(181, 144, 164, 150, 148, 157);
            context.fill();


            //box18
            context.fillStyle = "rgba(0,179,255,.4)";
            context.beginPath();
            context.moveTo(198, 139);
            context.lineTo(224, 236);
            context.bezierCurveTo(235, 233, 247, 231, 258, 230);
            context.lineTo(250, 130);
            context.bezierCurveTo(232, 132, 215, 135, 198, 139);
            context.fill();


            //box19
            context.fillStyle = "rgba(0,179,255,.8)";
            context.beginPath();
            context.moveTo(250, 130);
            context.lineTo(258, 230);
            context.bezierCurveTo(264, 230, 270, 230, 276, 230);
            context.bezierCurveTo(282, 230, 288, 230, 294, 230);
            context.lineTo(302, 130);
            context.bezierCurveTo(285, 129, 267, 129, 250, 130);
            context.fill();

            //box20
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(294, 230);
            context.bezierCurveTo(306, 231, 317, 233, 328, 236);
            context.lineTo(354, 139);
            context.bezierCurveTo(337, 135, 320, 132, 302, 130);
            context.fill();

            //box21
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(354, 139);
            context.lineTo(328, 236);
            context.bezierCurveTo(340, 240, 351, 244, 361, 249);
            context.lineTo(404, 158);
            context.bezierCurveTo(388, 150, 371, 144, 354, 139);
            context.fill();

            //box22
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(404, 158);
            context.lineTo(361, 249);
            context.bezierCurveTo(372, 254, 382, 260, 392, 266);
            context.lineTo(449, 184);
            context.bezierCurveTo(435, 174, 420, 165, 404, 158);
            context.fill();

            //box23
            context.fillStyle = "rgba(0,179,255,.7)";
            context.beginPath();
            context.moveTo(489, 218);
            context.bezierCurveTo(477, 205, 463, 194, 449, 184);
            context.lineTo(392, 266);
            context.bezierCurveTo(401, 273, 410, 280, 418, 289);
            context.lineTo(489, 218);
            context.fill();


            //9 divisions row 4
            //box24
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.bezierCurveTo(150, 273, 141, 280, 133, 289);
            context.lineTo(151, 307);
            context.lineTo(164, 320);
            context.bezierCurveTo(171, 314, 178, 308, 186, 302);
            context.lineTo(175, 287);
            context.lineTo(160, 266);
            context.fill();

            //box25
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(191, 248);
            context.bezierCurveTo(180, 253, 170, 259, 160, 266);
            context.lineTo(175, 287);
            context.lineTo(186, 302);
            context.bezierCurveTo(193, 297, 201, 293, 209, 289);
            context.lineTo(201, 271);
            context.lineTo(191, 248);
            context.fill();

            ////box26
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(224, 236);
            context.bezierCurveTo(212, 239, 201, 243, 191, 248);
            context.lineTo(201, 271);
            context.lineTo(209, 289);
            context.bezierCurveTo(218, 285, 226, 282, 235, 279);
            context.lineTo(230, 261);
            context.lineTo(224, 236);
            context.fill();

            //box27
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(258, 230);
            context.bezierCurveTo(247, 231, 235, 233, 224, 236);
            context.lineTo(230, 261);
            context.lineTo(235, 279);
            context.bezierCurveTo(244, 277, 253, 275, 262, 275);
            context.lineTo(261, 256);
            context.lineTo(258, 230);
            context.fill();

            //box28
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(294, 230);
            context.bezierCurveTo(288, 230, 282, 230, 276, 230);
            context.bezierCurveTo(270, 230, 264, 230, 258, 230);
            context.lineTo(261, 256);
            context.lineTo(262, 275);
            context.bezierCurveTo(267, 274, 271, 274, 276, 274);
            context.bezierCurveTo(280, 274, 285, 274, 290, 275);
            context.lineTo(291, 256);
            context.lineTo(294, 230);
            context.fill();

            //box29
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(328, 236);
            context.bezierCurveTo(317, 233, 306, 231, 294, 230);
            context.lineTo(291, 256);
            context.lineTo(290, 275);
            context.bezierCurveTo(299, 276, 308, 277, 317, 279);
            context.lineTo(322, 261);
            context.lineTo(328, 236);
            context.fill();

            //box30
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(361, 249);
            context.bezierCurveTo(351, 244, 340, 240, 328, 236);
            context.lineTo(322, 261);
            context.lineTo(317, 279);
            context.bezierCurveTo(326, 282, 334, 285, 343, 289);
            context.lineTo(351, 272);
            context.lineTo(361, 249);
            context.fill();

            //box31
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(392, 266);
            context.bezierCurveTo(382, 260, 372, 254, 361, 249);
            context.lineTo(351, 272);
            context.lineTo(343, 289);
            context.bezierCurveTo(351, 293, 359, 297, 366, 303);
            context.lineTo(377, 287);
            context.lineTo(392, 266);
            context.fill();

            //box32
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(387, 320);
            context.lineTo(400, 307);
            context.lineTo(418, 289);
            context.bezierCurveTo(410, 280, 401, 273, 392, 266);
            context.lineTo(377, 287);
            context.lineTo(366, 303);
            context.bezierCurveTo(374, 308, 381, 314, 387, 320);
            context.fill();

            //9 divisions row 5
            //box33
            context.fillStyle = "rgba(0,179,255,.8)";
            context.beginPath();
            context.moveTo(164, 320);
            context.lineTo(182, 337);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(200, 322);
            context.lineTo(186, 302);
            context.bezierCurveTo(178, 308, 171, 314, 164, 320);
            context.fill();

            //box34
            context.fillStyle = "rgba(0,179,255,1)";
            context.beginPath();
            context.moveTo(200, 322);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(220, 311);
            context.lineTo(209, 289);
            context.bezierCurveTo(201, 293, 193, 297, 186, 302);
            context.lineTo(200, 322);
            context.fill();

            //box35
            context.fillStyle = "rgba(0,179,255,.8)";
            context.beginPath();
            context.moveTo(220, 311);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(242, 303);
            context.lineTo(235, 279);
            context.bezierCurveTo(226, 282, 218, 285, 209, 289);
            context.lineTo(220, 311);
            context.fill();

            //box36
            context.fillStyle = "rgba(0,179,255,1)";
            context.beginPath();
            context.moveTo(242, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(264, 299);
            context.lineTo(262, 275);
            context.bezierCurveTo(253, 275, 244, 277, 235, 279);
            context.lineTo(242, 303);
            context.fill();

            //box37
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(262, 275);
            context.lineTo(264, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(288, 299);
            context.lineTo(290, 275);
            context.bezierCurveTo(285, 274, 280, 274, 276, 274);
            context.bezierCurveTo(271, 274, 267, 274, 262, 275);
            context.fill();

            //box38
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(288, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(310, 303);
            context.lineTo(317, 279);
            context.bezierCurveTo(308, 277, 299, 276, 290, 275);
            context.lineTo(288, 299);
            context.fill();

            //box39
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(310, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(332, 311);
            context.lineTo(343, 289);
            context.bezierCurveTo(334, 285, 326, 282, 317, 279);
            context.lineTo(310, 303);
            context.fill();

            //box40
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(332, 311);
            context.lineTo(276, 431);
            context.lineTo(277, 430);
            context.lineTo(352, 323);
            context.lineTo(366, 303);
            context.bezierCurveTo(359, 297, 351, 293, 343, 289);
            context.lineTo(332, 311);
            context.fill();

            //box41
            context.fillStyle = "rgba(0,179,255,0)";
            context.beginPath();
            context.moveTo(366, 303);
            context.lineTo(352, 323);
            context.lineTo(277, 430);
            context.lineTo(370, 337);
            context.lineTo(387, 320);
            context.bezierCurveTo(381, 314, 374, 308, 366, 303);
            context.fill();



            //lines do not edit
            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(61, 217);
            context.lineTo(63, 219);
            context.bezierCurveTo(63, 218, 64, 217, 64, 217);
            context.lineTo(63, 215);
            context.bezierCurveTo(62, 216, 62, 217, 61, 217);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 141);
            context.lineTo(189, 143);
            context.bezierCurveTo(191, 142, 192, 142, 194, 141);
            context.lineTo(193, 139);
            context.bezierCurveTo(192, 140, 190, 140, 188, 141);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(208, 136);
            context.lineTo(209, 138);
            context.bezierCurveTo(210, 137, 212, 137, 213, 137);
            context.lineTo(213, 135);
            context.bezierCurveTo(211, 135, 210, 135, 208, 136);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(198, 138);
            context.lineTo(199, 140);
            context.bezierCurveTo(200, 140, 202, 139, 204, 139);
            context.lineTo(203, 137);
            context.bezierCurveTo(201, 137, 200, 138, 198, 138);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 144);
            context.lineTo(179, 146);
            context.bezierCurveTo(181, 145, 183, 145, 184, 144);
            context.lineTo(184, 142);
            context.bezierCurveTo(182, 143, 180, 143, 179, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(218, 134);
            context.lineTo(218, 136);
            context.bezierCurveTo(220, 135, 222, 135, 223, 135);
            context.lineTo(223, 133);
            context.bezierCurveTo(221, 133, 220, 133, 218, 134);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(248, 129);
            context.lineTo(248, 131);
            context.bezierCurveTo(250, 131, 252, 131, 253, 131);
            context.lineTo(253, 129);
            context.bezierCurveTo(251, 129, 250, 129, 248, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(160, 151);
            context.lineTo(161, 153);
            context.bezierCurveTo(162, 152, 164, 152, 165, 151);
            context.lineTo(164, 149);
            context.bezierCurveTo(163, 150, 161, 150, 160, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(258, 129);
            context.lineTo(258, 131);
            context.bezierCurveTo(260, 130, 262, 130, 263, 130);
            context.lineTo(263, 128);
            context.bezierCurveTo(262, 128, 260, 128, 258, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(238, 130);
            context.lineTo(238, 132);
            context.bezierCurveTo(240, 132, 242, 132, 243, 132);
            context.lineTo(243, 130);
            context.bezierCurveTo(241, 130, 240, 130, 238, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(228, 132);
            context.lineTo(228, 134);
            context.bezierCurveTo(230, 134, 232, 133, 233, 133);
            context.lineTo(233, 131);
            context.bezierCurveTo(231, 131, 230, 132, 228, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(132, 164);
            context.lineTo(133, 166);
            context.bezierCurveTo(135, 165, 136, 164, 138, 164);
            context.lineTo(137, 162);
            context.bezierCurveTo(135, 163, 134, 163, 132, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(82, 198);
            context.lineTo(83, 200);
            context.bezierCurveTo(84, 199, 86, 198, 87, 197);
            context.lineTo(86, 195);
            context.bezierCurveTo(84, 196, 83, 197, 82, 198);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(90, 192);
            context.lineTo(91, 194);
            context.bezierCurveTo(92, 193, 94, 191, 95, 190);
            context.lineTo(94, 189);
            context.bezierCurveTo(92, 190, 91, 191, 90, 192);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(150, 155);
            context.lineTo(151, 157);
            context.bezierCurveTo(153, 156, 154, 156, 156, 155);
            context.lineTo(155, 153);
            context.bezierCurveTo(154, 154, 152, 154, 150, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(98, 186);
            context.lineTo(99, 187);
            context.bezierCurveTo(100, 186, 102, 186, 103, 185);
            context.lineTo(102, 183);
            context.bezierCurveTo(101, 184, 99, 185, 98, 186);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(74, 205);
            context.lineTo(76, 206);
            context.bezierCurveTo(77, 205, 78, 204, 79, 203);
            context.lineTo(78, 202);
            context.bezierCurveTo(77, 203, 75, 204, 74, 205);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(67, 212);
            context.lineTo(68, 213);
            context.bezierCurveTo(69, 212, 71, 211, 72, 210);
            context.lineTo(70, 208);
            context.bezierCurveTo(69, 210, 68, 211, 67, 212);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(106, 180);
            context.lineTo(107, 182);
            context.bezierCurveTo(109, 181, 110, 180, 112, 179);
            context.lineTo(110, 177);
            context.bezierCurveTo(109, 178, 108, 179, 106, 180);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(268, 128);
            context.lineTo(268, 130);
            context.bezierCurveTo(270, 130, 272, 130, 273, 130);
            context.lineTo(273, 128);
            context.bezierCurveTo(272, 128, 270, 128, 268, 128);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(141, 160);
            context.lineTo(142, 161);
            context.bezierCurveTo(144, 161, 145, 160, 147, 159);
            context.lineTo(146, 157);
            context.bezierCurveTo(144, 158, 143, 159, 141, 160);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(123, 169);
            context.lineTo(124, 171);
            context.bezierCurveTo(126, 170, 127, 169, 129, 168);
            context.lineTo(128, 167);
            context.bezierCurveTo(126, 167, 125, 168, 123, 169);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(115, 174);
            context.lineTo(116, 176);
            context.bezierCurveTo(117, 175, 119, 174, 120, 173);
            context.lineTo(119, 172);
            context.bezierCurveTo(118, 173, 116, 174, 115, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(169, 147);
            context.lineTo(170, 149);
            context.bezierCurveTo(172, 149, 173, 148, 175, 148);
            context.lineTo(174, 146);
            context.bezierCurveTo(172, 146, 171, 147, 169, 147);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(431, 174);
            context.bezierCurveTo(433, 174, 434, 175, 436, 176);
            context.lineTo(437, 174);
            context.bezierCurveTo(435, 174, 434, 173, 433, 172);
            context.lineTo(431, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(440, 179);
            context.bezierCurveTo(441, 180, 443, 181, 444, 182);
            context.lineTo(445, 180);
            context.bezierCurveTo(444, 179, 442, 178, 441, 177);
            context.lineTo(440, 179);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(423, 168);
            context.bezierCurveTo(424, 169, 426, 170, 427, 171);
            context.lineTo(428, 169);
            context.bezierCurveTo(427, 168, 425, 168, 424, 167);
            context.lineTo(423, 168);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 159);
            context.bezierCurveTo(406, 160, 408, 161, 409, 161);
            context.lineTo(410, 160);
            context.bezierCurveTo(409, 159, 407, 158, 406, 157);
            context.lineTo(405, 159);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(414, 164);
            context.bezierCurveTo(415, 164, 417, 165, 418, 166);
            context.lineTo(419, 164);
            context.bezierCurveTo(418, 163, 416, 163, 415, 162);
            context.lineTo(414, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(396, 155);
            context.bezierCurveTo(397, 156, 399, 156, 400, 157);
            context.lineTo(401, 155);
            context.bezierCurveTo(400, 155, 398, 154, 397, 153);
            context.lineTo(396, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 130);
            context.bezierCurveTo(280, 130, 282, 130, 284, 130);
            context.lineTo(284, 128);
            context.bezierCurveTo(282, 128, 280, 128, 278, 128);
            context.lineTo(278, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(480, 210);
            context.bezierCurveTo(481, 211, 482, 212, 483, 213);
            context.lineTo(485, 212);
            context.bezierCurveTo(483, 211, 482, 209, 481, 208);
            context.lineTo(480, 210);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(456, 190);
            context.bezierCurveTo(458, 191, 459, 192, 460, 193);
            context.lineTo(462, 192);
            context.bezierCurveTo(460, 191, 459, 190, 458, 189);
            context.lineTo(456, 190);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(448, 185);
            context.bezierCurveTo(450, 185, 451, 186, 452, 187);
            context.lineTo(454, 186);
            context.bezierCurveTo(452, 185, 451, 184, 449, 183);
            context.lineTo(448, 185);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(464, 197);
            context.bezierCurveTo(466, 198, 467, 199, 468, 200);
            context.lineTo(470, 198);
            context.bezierCurveTo(468, 197, 467, 196, 466, 195);
            context.lineTo(464, 197);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(472, 203);
            context.bezierCurveTo(473, 204, 475, 205, 476, 206);
            context.lineTo(477, 205);
            context.bezierCurveTo(476, 204, 475, 203, 473, 202);
            context.lineTo(472, 203);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(319, 133);
            context.bezierCurveTo(320, 133, 322, 134, 324, 134);
            context.lineTo(324, 132);
            context.bezierCurveTo(322, 132, 321, 131, 319, 131);
            context.lineTo(319, 133);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(309, 132);
            context.bezierCurveTo(310, 132, 312, 132, 314, 132);
            context.lineTo(314, 130);
            context.bezierCurveTo(312, 130, 311, 130, 309, 130);
            context.lineTo(309, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(289, 130);
            context.bezierCurveTo(290, 130, 292, 131, 294, 131);
            context.lineTo(294, 129);
            context.bezierCurveTo(292, 129, 290, 128, 289, 128);
            context.lineTo(289, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(387, 151);
            context.bezierCurveTo(388, 152, 390, 152, 391, 153);
            context.lineTo(392, 151);
            context.bezierCurveTo(390, 151, 389, 150, 387, 149);
            context.lineTo(387, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(299, 131);
            context.bezierCurveTo(300, 131, 302, 131, 304, 131);
            context.lineTo(304, 129);
            context.bezierCurveTo(302, 129, 300, 129, 299, 129);
            context.lineTo(299, 131);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(329, 135);
            context.bezierCurveTo(330, 135, 332, 135, 333, 136);
            context.lineTo(334, 134);
            context.bezierCurveTo(332, 133, 331, 133, 329, 133);
            context.lineTo(329, 135);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(368, 144);
            context.bezierCurveTo(369, 145, 371, 145, 372, 146);
            context.lineTo(373, 144);
            context.bezierCurveTo(371, 144, 370, 143, 368, 143);
            context.lineTo(368, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(377, 148);
            context.bezierCurveTo(379, 148, 380, 149, 382, 149);
            context.lineTo(383, 148);
            context.bezierCurveTo(381, 147, 379, 146, 378, 146);
            context.lineTo(377, 148);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(348, 139);
            context.bezierCurveTo(350, 139, 351, 140, 353, 140);
            context.lineTo(354, 138);
            context.bezierCurveTo(352, 138, 350, 137, 349, 137);
            context.lineTo(348, 139);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(358, 142);
            context.bezierCurveTo(360, 142, 361, 142, 363, 143);
            context.lineTo(363, 141);
            context.bezierCurveTo(362, 141, 360, 140, 359, 140);
            context.lineTo(358, 142);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(338, 137);
            context.bezierCurveTo(340, 137, 342, 137, 343, 138);
            context.lineTo(344, 136);
            context.bezierCurveTo(342, 135, 340, 135, 339, 135);
            context.lineTo(338, 137);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(487, 217);
            context.bezierCurveTo(488, 217, 488, 218, 489, 219);
            context.lineTo(490, 217);
            context.bezierCurveTo(490, 217, 489, 216, 488, 215);
            context.lineTo(487, 217);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(26, 181);
            context.bezierCurveTo(164, 43, 387, 43, 526, 181);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(437, 116);
            context.lineTo(453, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(331, 82);
            context.lineTo(337, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(221, 82);
            context.lineTo(215, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(115, 116);
            context.lineTo(100, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(164, 320);
            context.bezierCurveTo(226, 259, 325, 259, 387, 320);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(134, 290);
            context.lineTo(132, 288);
            context.bezierCurveTo(133, 288, 133, 287, 134, 286);
            context.lineTo(135, 288);
            context.bezierCurveTo(135, 288, 134, 289, 134, 290);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(139, 284);
            context.lineTo(138, 283);
            context.bezierCurveTo(139, 282, 140, 281, 141, 280);
            context.lineTo(143, 281);
            context.bezierCurveTo(141, 282, 140, 283, 139, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(412, 284);
            context.bezierCurveTo(411, 283, 410, 282, 409, 281);
            context.lineTo(410, 279);
            context.bezierCurveTo(411, 281, 412, 282, 414, 283);
            context.lineTo(412, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(146, 278);
            context.lineTo(145, 276);
            context.bezierCurveTo(146, 275, 148, 274, 149, 273);
            context.lineTo(150, 275);
            context.bezierCurveTo(149, 276, 148, 277, 146, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 278);
            context.bezierCurveTo(404, 277, 402, 276, 401, 275);
            context.lineTo(402, 273);
            context.bezierCurveTo(404, 274, 405, 275, 406, 276);
            context.lineTo(405, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(154, 272);
            context.lineTo(153, 270);
            context.bezierCurveTo(154, 269, 156, 268, 157, 267);
            context.lineTo(158, 269);
            context.bezierCurveTo(157, 270, 155, 271, 154, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(397, 272);
            context.bezierCurveTo(396, 271, 395, 270, 393, 269);
            context.lineTo(395, 267);
            context.bezierCurveTo(396, 268, 397, 269, 399, 270);
            context.lineTo(397, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(162, 266);
            context.lineTo(161, 264);
            context.bezierCurveTo(162, 263, 164, 262, 165, 261);
            context.lineTo(166, 263);
            context.bezierCurveTo(165, 264, 163, 265, 162, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(389, 266);
            context.bezierCurveTo(388, 265, 387, 264, 385, 263);
            context.lineTo(386, 261);
            context.bezierCurveTo(388, 262, 389, 263, 390, 264);
            context.lineTo(389, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(381, 260);
            context.bezierCurveTo(380, 260, 378, 259, 377, 258);
            context.lineTo(378, 256);
            context.bezierCurveTo(379, 257, 381, 258, 382, 259);
            context.lineTo(381, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(170, 260);
            context.lineTo(169, 259);
            context.bezierCurveTo(171, 258, 172, 257, 174, 256);
            context.lineTo(175, 258);
            context.bezierCurveTo(173, 259, 172, 260, 170, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(373, 255);
            context.bezierCurveTo(371, 255, 370, 254, 368, 253);
            context.lineTo(369, 251);
            context.bezierCurveTo(371, 252, 372, 253, 374, 254);
            context.lineTo(373, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 255);
            context.lineTo(178, 254);
            context.bezierCurveTo(179, 253, 181, 252, 182, 251);
            context.lineTo(183, 253);
            context.bezierCurveTo(182, 254, 180, 255, 179, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(364, 251);
            context.bezierCurveTo(362, 250, 361, 249, 359, 249);
            context.lineTo(360, 247);
            context.bezierCurveTo(362, 248, 363, 248, 365, 249);
            context.lineTo(364, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 251);
            context.lineTo(187, 249);
            context.bezierCurveTo(188, 248, 190, 248, 191, 247);
            context.lineTo(192, 249);
            context.bezierCurveTo(191, 249, 189, 250, 188, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(355, 247);
            context.bezierCurveTo(353, 246, 352, 246, 350, 245);
            context.lineTo(351, 243);
            context.bezierCurveTo(353, 244, 354, 244, 356, 245);
            context.lineTo(355, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(197, 247);
            context.lineTo(196, 245);
            context.bezierCurveTo(197, 244, 199, 244, 200, 243);
            context.lineTo(201, 245);
            context.bezierCurveTo(200, 245, 198, 246, 197, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(346, 243);
            context.bezierCurveTo(344, 243, 343, 242, 341, 241);
            context.lineTo(342, 240);
            context.bezierCurveTo(343, 240, 345, 241, 346, 241);
            context.lineTo(346, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(206, 243);
            context.lineTo(205, 241);
            context.bezierCurveTo(207, 241, 208, 240, 210, 240);
            context.lineTo(210, 241);
            context.bezierCurveTo(209, 242, 207, 243, 206, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(336, 240);
            context.bezierCurveTo(335, 239, 333, 239, 332, 238);
            context.lineTo(332, 237);
            context.bezierCurveTo(334, 237, 335, 238, 337, 238);
            context.lineTo(336, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(215, 240);
            context.lineTo(215, 238);
            context.bezierCurveTo(216, 237, 218, 237, 219, 237);
            context.lineTo(220, 238);
            context.bezierCurveTo(218, 239, 217, 239, 215, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(327, 237);
            context.bezierCurveTo(325, 237, 324, 236, 322, 236);
            context.lineTo(323, 234);
            context.bezierCurveTo(324, 234, 326, 235, 328, 235);
            context.lineTo(327, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(225, 237);
            context.lineTo(224, 235);
            context.bezierCurveTo(226, 235, 227, 234, 229, 234);
            context.lineTo(229, 236);
            context.bezierCurveTo(228, 236, 226, 237, 225, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(317, 235);
            context.bezierCurveTo(316, 235, 314, 234, 313, 234);
            context.lineTo(313, 232);
            context.bezierCurveTo(315, 232, 316, 233, 318, 233);
            context.lineTo(317, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(234, 235);
            context.lineTo(234, 233);
            context.bezierCurveTo(235, 233, 237, 232, 239, 232);
            context.lineTo(239, 234);
            context.bezierCurveTo(237, 234, 236, 235, 234, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(308, 233);
            context.bezierCurveTo(306, 233, 304, 233, 303, 232);
            context.lineTo(303, 230);
            context.bezierCurveTo(305, 231, 306, 231, 308, 231);
            context.lineTo(308, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(244, 233);
            context.lineTo(244, 231);
            context.bezierCurveTo(245, 231, 247, 231, 249, 230);
            context.lineTo(249, 232);
            context.bezierCurveTo(247, 233, 246, 233, 244, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(298, 232);
            context.bezierCurveTo(296, 232, 295, 231, 293, 231);
            context.lineTo(293, 229);
            context.bezierCurveTo(295, 229, 297, 230, 298, 230);
            context.lineTo(298, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(254, 232);
            context.lineTo(253, 230);
            context.bezierCurveTo(255, 230, 257, 229, 258, 229);
            context.lineTo(259, 231);
            context.bezierCurveTo(257, 231, 255, 232, 254, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(288, 231);
            context.bezierCurveTo(287, 231, 285, 231, 283, 231);
            context.lineTo(283, 229);
            context.bezierCurveTo(285, 229, 287, 229, 288, 229);
            context.lineTo(288, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(264, 231);
            context.lineTo(263, 229);
            context.bezierCurveTo(265, 229, 267, 229, 268, 229);
            context.lineTo(268, 231);
            context.bezierCurveTo(267, 231, 265, 231, 264, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 231);
            context.bezierCurveTo(277, 231, 275, 231, 273, 231);
            context.lineTo(273, 229);
            context.bezierCurveTo(275, 229, 277, 229, 278, 229);
            context.lineTo(278, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(418, 289);
            context.bezierCurveTo(417, 289, 417, 288, 416, 288);
            context.lineTo(417, 286);
            context.bezierCurveTo(418, 287, 419, 287, 419, 288);
            context.lineTo(418, 289);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(479, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(425, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(367, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(307, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(245, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(184, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(126, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(72, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 45);
            context.bezierCurveTo(521, 48, 519, 50, 516, 50);
            context.lineTo(404, 50);
            context.bezierCurveTo(401, 50, 399, 48, 399, 45);
            context.lineTo(399, 17);
            context.bezierCurveTo(399, 14, 401, 12, 404, 12);
            context.lineTo(516, 12);
            context.bezierCurveTo(519, 12, 521, 14, 521, 17);
            context.lineTo(521, 45);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 345);
            context.bezierCurveTo(521, 348, 519, 350, 516, 350);
            context.lineTo(404, 350);
            context.bezierCurveTo(401, 350, 399, 348, 399, 345);
            context.lineTo(399, 317);
            context.bezierCurveTo(399, 314, 401, 312, 404, 312);
            context.lineTo(516, 312);
            context.bezierCurveTo(519, 312, 521, 314, 521, 317);
            context.lineTo(521, 345);
            context.stroke();








            //end of lines

            //textbox for text

            context.font = "24px calibri";
            context.fillText("197 OF BIP", 407, 39);
            context.textAlign = "center";

            context.font = "24px calibri";
            context.fillText("197 IF BIP", 457, 340);
            context.textAlign = "center";

            //outer row
            //text 1
            context.font = "24px calibri";
            context.fillText("28%", 70, 85);

            //text 2
            context.font = "24px calibri";
            context.fillText("46%", 279, 35);

            //text 3
            context.font = "24px calibri";
            context.fillText("27%", 485, 85);

            //5 divisons row 1
            //text 1
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 60, 138);

            //text 2
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 165, 85);

            //text 3
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 275, 65);

            //text 4
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 390, 85);

            //text 5
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 490, 138);

            //9 divisons row 2
            //text 6
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 65, 190);

            //text 7
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 113, 158);

            //text 8
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 165, 133);

            //text 9
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 217, 115);

            //text 10
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("16", 275, 110);

            //text 11
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 333, 115);

            //text 12
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 387, 133);

            //text 13
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 438, 155);

            //text 14
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 485, 190);

            //9 divisons row 3
            //text 15
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 100, 230);

            //text 16
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 140, 205);

            //text 17 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 185, 185);

            //text 18
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 228, 170);

            //text 19
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("10", 275, 163);

            //text 20
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 323, 170);

            //text 21
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 370, 185);

            //text 22
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 410, 205);

            //text 23
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 450, 230);

            //9 divisons row 4
            //text 24
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 157, 300);

            //text 25
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 187, 285);

            //text 26 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 215, 270);

            //text 27
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 245, 260);

            //text 28
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 275, 255);

            //text 29
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 308, 260);

            //text 30
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 335, 270);

            //text 31
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 364, 285);

            //text 32
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 393, 300);

            //9 divisons row 5
            //text 33
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("18", 183, 330);

            //text 34
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("27", 203, 315);

            //text 35 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("17", 226, 305);

            //text 36
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("21", 252, 297);

            //text 37
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 275, 295);

            //text 38
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 300, 297);

            //text 39
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 325, 305);

            //text 40
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 347, 315);

            //text 41
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("1", 367, 330);

        }
    }

    var theCanvasR3C1 = document.getElementById('canvasLHPthree');
    if (theCanvasR3C1 && theCanvasR3C1.getContext) {
        var context = theCanvasR3C1.getContext("2d");
        if (context) {
            //main field shape and bg color
            context.fillStyle = "rgb(255,255,255)";
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.fill();

            //5 divisions row 1
            //box 1
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(1, 157);
            context.lineTo(26, 181);
            context.bezierCurveTo(52, 155, 82, 133, 115, 116);
            context.lineTo(100, 85);
            context.bezierCurveTo(64, 103, 31, 127, 1, 157);
            context.fill();

            //box 2
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(100, 85);
            context.lineTo(115, 116);
            context.bezierCurveTo(148, 100, 183, 88, 221, 82);
            context.lineTo(215, 47);
            context.bezierCurveTo(175, 54, 136, 66, 100, 85);
            context.fill();

            //box3
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(215, 47);
            context.lineTo(221, 82);
            context.bezierCurveTo(239, 79, 257, 78, 276, 78);
            context.bezierCurveTo(295, 78, 313, 79, 331, 82);
            context.lineTo(337, 47);
            context.bezierCurveTo(297, 41, 256, 41, 215, 47);
            context.fill();

            //box4
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(337, 47);
            context.lineTo(331, 82);
            context.bezierCurveTo(369, 88, 404, 100, 437, 116);
            context.lineTo(452, 85);
            context.bezierCurveTo(416, 66, 377, 54, 337, 47);
            context.fill();

            //box5
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(550, 157);
            context.bezierCurveTo(521, 127, 488, 103, 452, 85);
            context.lineTo(437, 116);
            context.bezierCurveTo(470, 133, 500, 155, 526, 181);
            context.lineTo(550, 157);
            context.fill();

            //9 divisions row 2
            //take note last value for rgba can also be in decimals
            //the full value below is 255
            //box6
            context.fillStyle = "rgba(255,46,58,.0)";
            context.beginPath();
            context.moveTo(73, 142);
            context.bezierCurveTo(56, 153, 41, 166, 26, 181);
            context.lineTo(62, 218);
            context.bezierCurveTo(75, 205, 88, 194, 103, 184);
            context.lineTo(73, 142);
            context.fill();

            //box7
            context.fillStyle = "rgba(255,46,58,.5)";
            context.beginPath();
            context.moveTo(126, 111);
            context.bezierCurveTo(108, 119, 90, 130, 73, 142);
            context.lineTo(103, 184);
            context.bezierCurveTo(117, 174, 132, 165, 148, 157);
            context.lineTo(126, 111);
            context.fill();

            //box8
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(184, 89);
            context.bezierCurveTo(165, 95, 145, 102, 126, 111);
            context.lineTo(148, 157);
            context.bezierCurveTo(164, 150, 181, 144, 198, 139);
            context.lineTo(184, 89);
            context.fill();

            //box9
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(245, 79);
            context.bezierCurveTo(225, 81, 204, 84, 184, 89);
            context.lineTo(198, 139);
            context.bezierCurveTo(215, 135, 232, 132, 250, 130);
            context.lineTo(245, 79);
            context.fill();

            //box10
            context.fillStyle = "rgba(255,46,58,.85)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(307, 79);
            context.bezierCurveTo(286, 77, 266, 77, 245, 79);
            context.lineTo(250, 130);
            context.bezierCurveTo(267, 129, 285, 129, 302, 130);
            context.fill();

            //box11
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(368, 90);
            context.bezierCurveTo(348, 84, 327, 81, 307, 79);
            context.lineTo(302, 130);
            context.bezierCurveTo(320, 132, 337, 135, 354, 139);
            context.lineTo(368, 90);
            context.fill();

            //box12
            context.fillStyle = "rgba(255,46,58,.0)";
            context.beginPath();
            context.moveTo(426, 111);
            context.bezierCurveTo(407, 102, 387, 95, 368, 90);
            context.lineTo(354, 139);
            context.bezierCurveTo(371, 144, 388, 150, 404, 158);
            context.lineTo(426, 111);
            context.fill();

            //box13
            context.fillStyle = "rgba(255,46,58,.5)";
            context.beginPath();
            context.moveTo(479, 142);
            context.bezierCurveTo(462, 130, 444, 119, 426, 111);
            context.lineTo(404, 158);
            context.bezierCurveTo(420, 165, 435, 174, 449, 184);
            context.lineTo(479, 142);
            context.fill();

            //box14
            context.fillStyle = "rgba(255,46,58,.0)";
            context.beginPath();
            context.moveTo(479, 142);
            context.lineTo(449, 184);
            context.bezierCurveTo(463, 194, 477, 205, 489, 218);
            context.lineTo(526, 181);
            context.bezierCurveTo(511, 167, 495, 153, 479, 142);
            context.fill();

            //9 divisions row 3
            //box15
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(103, 184);
            context.lineTo(160, 266);
            context.bezierCurveTo(170, 259, 180, 253, 191, 248);
            context.lineTo(148, 157);
            context.bezierCurveTo(132, 165, 117, 174, 103, 184);
            context.fill();

            //box16
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.lineTo(103, 184);
            context.bezierCurveTo(88, 194, 75, 205, 62, 218);
            context.lineTo(133, 289);
            context.bezierCurveTo(141, 280, 150, 273, 160, 266);
            context.fill();

            ////box17
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(148, 157);
            context.lineTo(191, 248);
            context.bezierCurveTo(201, 243, 212, 239, 224, 236);
            context.lineTo(198, 139);
            context.bezierCurveTo(181, 144, 164, 150, 148, 157);
            context.fill();


            //box18
            context.fillStyle = "rgba(255,46,58,.4)";
            context.beginPath();
            context.moveTo(198, 139);
            context.lineTo(224, 236);
            context.bezierCurveTo(235, 233, 247, 231, 258, 230);
            context.lineTo(250, 130);
            context.bezierCurveTo(232, 132, 215, 135, 198, 139);
            context.fill();


            //box19
            context.fillStyle = "rgba(255,46,58,.8)";
            context.beginPath();
            context.moveTo(250, 130);
            context.lineTo(258, 230);
            context.bezierCurveTo(264, 230, 270, 230, 276, 230);
            context.bezierCurveTo(282, 230, 288, 230, 294, 230);
            context.lineTo(302, 130);
            context.bezierCurveTo(285, 129, 267, 129, 250, 130);
            context.fill();

            //box20
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(302, 130);
            context.lineTo(294, 230);
            context.bezierCurveTo(306, 231, 317, 233, 328, 236);
            context.lineTo(354, 139);
            context.bezierCurveTo(337, 135, 320, 132, 302, 130);
            context.fill();

            //box21
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(354, 139);
            context.lineTo(328, 236);
            context.bezierCurveTo(340, 240, 351, 244, 361, 249);
            context.lineTo(404, 158);
            context.bezierCurveTo(388, 150, 371, 144, 354, 139);
            context.fill();

            //box22
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(404, 158);
            context.lineTo(361, 249);
            context.bezierCurveTo(372, 254, 382, 260, 392, 266);
            context.lineTo(449, 184);
            context.bezierCurveTo(435, 174, 420, 165, 404, 158);
            context.fill();

            //box23
            context.fillStyle = "rgba(255,46,58,.7)";
            context.beginPath();
            context.moveTo(489, 218);
            context.bezierCurveTo(477, 205, 463, 194, 449, 184);
            context.lineTo(392, 266);
            context.bezierCurveTo(401, 273, 410, 280, 418, 289);
            context.lineTo(489, 218);
            context.fill();


            //9 divisions row 4
            //box24
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(160, 266);
            context.bezierCurveTo(150, 273, 141, 280, 133, 289);
            context.lineTo(151, 307);
            context.lineTo(164, 320);
            context.bezierCurveTo(171, 314, 178, 308, 186, 302);
            context.lineTo(175, 287);
            context.lineTo(160, 266);
            context.fill();

            //box25
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(191, 248);
            context.bezierCurveTo(180, 253, 170, 259, 160, 266);
            context.lineTo(175, 287);
            context.lineTo(186, 302);
            context.bezierCurveTo(193, 297, 201, 293, 209, 289);
            context.lineTo(201, 271);
            context.lineTo(191, 248);
            context.fill();

            ////box26
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(224, 236);
            context.bezierCurveTo(212, 239, 201, 243, 191, 248);
            context.lineTo(201, 271);
            context.lineTo(209, 289);
            context.bezierCurveTo(218, 285, 226, 282, 235, 279);
            context.lineTo(230, 261);
            context.lineTo(224, 236);
            context.fill();

            //box27
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(258, 230);
            context.bezierCurveTo(247, 231, 235, 233, 224, 236);
            context.lineTo(230, 261);
            context.lineTo(235, 279);
            context.bezierCurveTo(244, 277, 253, 275, 262, 275);
            context.lineTo(261, 256);
            context.lineTo(258, 230);
            context.fill();

            //box28
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(294, 230);
            context.bezierCurveTo(288, 230, 282, 230, 276, 230);
            context.bezierCurveTo(270, 230, 264, 230, 258, 230);
            context.lineTo(261, 256);
            context.lineTo(262, 275);
            context.bezierCurveTo(267, 274, 271, 274, 276, 274);
            context.bezierCurveTo(280, 274, 285, 274, 290, 275);
            context.lineTo(291, 256);
            context.lineTo(294, 230);
            context.fill();

            //box29
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(328, 236);
            context.bezierCurveTo(317, 233, 306, 231, 294, 230);
            context.lineTo(291, 256);
            context.lineTo(290, 275);
            context.bezierCurveTo(299, 276, 308, 277, 317, 279);
            context.lineTo(322, 261);
            context.lineTo(328, 236);
            context.fill();

            //box30
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(361, 249);
            context.bezierCurveTo(351, 244, 340, 240, 328, 236);
            context.lineTo(322, 261);
            context.lineTo(317, 279);
            context.bezierCurveTo(326, 282, 334, 285, 343, 289);
            context.lineTo(351, 272);
            context.lineTo(361, 249);
            context.fill();

            //box31
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(392, 266);
            context.bezierCurveTo(382, 260, 372, 254, 361, 249);
            context.lineTo(351, 272);
            context.lineTo(343, 289);
            context.bezierCurveTo(351, 293, 359, 297, 366, 303);
            context.lineTo(377, 287);
            context.lineTo(392, 266);
            context.fill();

            //box32
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(387, 320);
            context.lineTo(400, 307);
            context.lineTo(418, 289);
            context.bezierCurveTo(410, 280, 401, 273, 392, 266);
            context.lineTo(377, 287);
            context.lineTo(366, 303);
            context.bezierCurveTo(374, 308, 381, 314, 387, 320);
            context.fill();

            //9 divisions row 5
            //box33
            context.fillStyle = "rgba(255,46,58,.8)";
            context.beginPath();
            context.moveTo(164, 320);
            context.lineTo(182, 337);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(200, 322);
            context.lineTo(186, 302);
            context.bezierCurveTo(178, 308, 171, 314, 164, 320);
            context.fill();

            //box34
            context.fillStyle = "rgba(255,46,58,1)";
            context.beginPath();
            context.moveTo(200, 322);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(220, 311);
            context.lineTo(209, 289);
            context.bezierCurveTo(201, 293, 193, 297, 186, 302);
            context.lineTo(200, 322);
            context.fill();

            //box35
            context.fillStyle = "rgba(255,46,58,.8)";
            context.beginPath();
            context.moveTo(220, 311);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(242, 303);
            context.lineTo(235, 279);
            context.bezierCurveTo(226, 282, 218, 285, 209, 289);
            context.lineTo(220, 311);
            context.fill();

            //box36
            context.fillStyle = "rgba(255,46,58,1)";
            context.beginPath();
            context.moveTo(242, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(264, 299);
            context.lineTo(262, 275);
            context.bezierCurveTo(253, 275, 244, 277, 235, 279);
            context.lineTo(242, 303);
            context.fill();

            //box37
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(262, 275);
            context.lineTo(264, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(288, 299);
            context.lineTo(290, 275);
            context.bezierCurveTo(285, 274, 280, 274, 276, 274);
            context.bezierCurveTo(271, 274, 267, 274, 262, 275);
            context.fill();

            //box38
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(288, 299);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(310, 303);
            context.lineTo(317, 279);
            context.bezierCurveTo(308, 277, 299, 276, 290, 275);
            context.lineTo(288, 299);
            context.fill();

            //box39
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(310, 303);
            context.lineTo(276, 431);
            context.lineTo(276, 431);
            context.lineTo(332, 311);
            context.lineTo(343, 289);
            context.bezierCurveTo(334, 285, 326, 282, 317, 279);
            context.lineTo(310, 303);
            context.fill();

            //box40
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(332, 311);
            context.lineTo(276, 431);
            context.lineTo(277, 430);
            context.lineTo(352, 323);
            context.lineTo(366, 303);
            context.bezierCurveTo(359, 297, 351, 293, 343, 289);
            context.lineTo(332, 311);
            context.fill();

            //box41
            context.fillStyle = "rgba(255,46,58,0)";
            context.beginPath();
            context.moveTo(366, 303);
            context.lineTo(352, 323);
            context.lineTo(277, 430);
            context.lineTo(370, 337);
            context.lineTo(387, 320);
            context.bezierCurveTo(381, 314, 374, 308, 366, 303);
            context.fill();



            //lines do not edit
            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(550, 157);
            context.lineTo(276, 431);
            context.lineTo(1, 157);
            context.bezierCurveTo(153, 5, 398, 5, 550, 157);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(61, 217);
            context.lineTo(63, 219);
            context.bezierCurveTo(63, 218, 64, 217, 64, 217);
            context.lineTo(63, 215);
            context.bezierCurveTo(62, 216, 62, 217, 61, 217);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 141);
            context.lineTo(189, 143);
            context.bezierCurveTo(191, 142, 192, 142, 194, 141);
            context.lineTo(193, 139);
            context.bezierCurveTo(192, 140, 190, 140, 188, 141);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(208, 136);
            context.lineTo(209, 138);
            context.bezierCurveTo(210, 137, 212, 137, 213, 137);
            context.lineTo(213, 135);
            context.bezierCurveTo(211, 135, 210, 135, 208, 136);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(198, 138);
            context.lineTo(199, 140);
            context.bezierCurveTo(200, 140, 202, 139, 204, 139);
            context.lineTo(203, 137);
            context.bezierCurveTo(201, 137, 200, 138, 198, 138);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 144);
            context.lineTo(179, 146);
            context.bezierCurveTo(181, 145, 183, 145, 184, 144);
            context.lineTo(184, 142);
            context.bezierCurveTo(182, 143, 180, 143, 179, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(218, 134);
            context.lineTo(218, 136);
            context.bezierCurveTo(220, 135, 222, 135, 223, 135);
            context.lineTo(223, 133);
            context.bezierCurveTo(221, 133, 220, 133, 218, 134);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(248, 129);
            context.lineTo(248, 131);
            context.bezierCurveTo(250, 131, 252, 131, 253, 131);
            context.lineTo(253, 129);
            context.bezierCurveTo(251, 129, 250, 129, 248, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(160, 151);
            context.lineTo(161, 153);
            context.bezierCurveTo(162, 152, 164, 152, 165, 151);
            context.lineTo(164, 149);
            context.bezierCurveTo(163, 150, 161, 150, 160, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(258, 129);
            context.lineTo(258, 131);
            context.bezierCurveTo(260, 130, 262, 130, 263, 130);
            context.lineTo(263, 128);
            context.bezierCurveTo(262, 128, 260, 128, 258, 129);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(238, 130);
            context.lineTo(238, 132);
            context.bezierCurveTo(240, 132, 242, 132, 243, 132);
            context.lineTo(243, 130);
            context.bezierCurveTo(241, 130, 240, 130, 238, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(228, 132);
            context.lineTo(228, 134);
            context.bezierCurveTo(230, 134, 232, 133, 233, 133);
            context.lineTo(233, 131);
            context.bezierCurveTo(231, 131, 230, 132, 228, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(132, 164);
            context.lineTo(133, 166);
            context.bezierCurveTo(135, 165, 136, 164, 138, 164);
            context.lineTo(137, 162);
            context.bezierCurveTo(135, 163, 134, 163, 132, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(82, 198);
            context.lineTo(83, 200);
            context.bezierCurveTo(84, 199, 86, 198, 87, 197);
            context.lineTo(86, 195);
            context.bezierCurveTo(84, 196, 83, 197, 82, 198);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(90, 192);
            context.lineTo(91, 194);
            context.bezierCurveTo(92, 193, 94, 191, 95, 190);
            context.lineTo(94, 189);
            context.bezierCurveTo(92, 190, 91, 191, 90, 192);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(150, 155);
            context.lineTo(151, 157);
            context.bezierCurveTo(153, 156, 154, 156, 156, 155);
            context.lineTo(155, 153);
            context.bezierCurveTo(154, 154, 152, 154, 150, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(98, 186);
            context.lineTo(99, 187);
            context.bezierCurveTo(100, 186, 102, 186, 103, 185);
            context.lineTo(102, 183);
            context.bezierCurveTo(101, 184, 99, 185, 98, 186);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(74, 205);
            context.lineTo(76, 206);
            context.bezierCurveTo(77, 205, 78, 204, 79, 203);
            context.lineTo(78, 202);
            context.bezierCurveTo(77, 203, 75, 204, 74, 205);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(67, 212);
            context.lineTo(68, 213);
            context.bezierCurveTo(69, 212, 71, 211, 72, 210);
            context.lineTo(70, 208);
            context.bezierCurveTo(69, 210, 68, 211, 67, 212);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(106, 180);
            context.lineTo(107, 182);
            context.bezierCurveTo(109, 181, 110, 180, 112, 179);
            context.lineTo(110, 177);
            context.bezierCurveTo(109, 178, 108, 179, 106, 180);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(268, 128);
            context.lineTo(268, 130);
            context.bezierCurveTo(270, 130, 272, 130, 273, 130);
            context.lineTo(273, 128);
            context.bezierCurveTo(272, 128, 270, 128, 268, 128);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(141, 160);
            context.lineTo(142, 161);
            context.bezierCurveTo(144, 161, 145, 160, 147, 159);
            context.lineTo(146, 157);
            context.bezierCurveTo(144, 158, 143, 159, 141, 160);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(123, 169);
            context.lineTo(124, 171);
            context.bezierCurveTo(126, 170, 127, 169, 129, 168);
            context.lineTo(128, 167);
            context.bezierCurveTo(126, 167, 125, 168, 123, 169);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(115, 174);
            context.lineTo(116, 176);
            context.bezierCurveTo(117, 175, 119, 174, 120, 173);
            context.lineTo(119, 172);
            context.bezierCurveTo(118, 173, 116, 174, 115, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(169, 147);
            context.lineTo(170, 149);
            context.bezierCurveTo(172, 149, 173, 148, 175, 148);
            context.lineTo(174, 146);
            context.bezierCurveTo(172, 146, 171, 147, 169, 147);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(431, 174);
            context.bezierCurveTo(433, 174, 434, 175, 436, 176);
            context.lineTo(437, 174);
            context.bezierCurveTo(435, 174, 434, 173, 433, 172);
            context.lineTo(431, 174);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(440, 179);
            context.bezierCurveTo(441, 180, 443, 181, 444, 182);
            context.lineTo(445, 180);
            context.bezierCurveTo(444, 179, 442, 178, 441, 177);
            context.lineTo(440, 179);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(423, 168);
            context.bezierCurveTo(424, 169, 426, 170, 427, 171);
            context.lineTo(428, 169);
            context.bezierCurveTo(427, 168, 425, 168, 424, 167);
            context.lineTo(423, 168);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 159);
            context.bezierCurveTo(406, 160, 408, 161, 409, 161);
            context.lineTo(410, 160);
            context.bezierCurveTo(409, 159, 407, 158, 406, 157);
            context.lineTo(405, 159);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(414, 164);
            context.bezierCurveTo(415, 164, 417, 165, 418, 166);
            context.lineTo(419, 164);
            context.bezierCurveTo(418, 163, 416, 163, 415, 162);
            context.lineTo(414, 164);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(396, 155);
            context.bezierCurveTo(397, 156, 399, 156, 400, 157);
            context.lineTo(401, 155);
            context.bezierCurveTo(400, 155, 398, 154, 397, 153);
            context.lineTo(396, 155);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 130);
            context.bezierCurveTo(280, 130, 282, 130, 284, 130);
            context.lineTo(284, 128);
            context.bezierCurveTo(282, 128, 280, 128, 278, 128);
            context.lineTo(278, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(480, 210);
            context.bezierCurveTo(481, 211, 482, 212, 483, 213);
            context.lineTo(485, 212);
            context.bezierCurveTo(483, 211, 482, 209, 481, 208);
            context.lineTo(480, 210);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(456, 190);
            context.bezierCurveTo(458, 191, 459, 192, 460, 193);
            context.lineTo(462, 192);
            context.bezierCurveTo(460, 191, 459, 190, 458, 189);
            context.lineTo(456, 190);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(448, 185);
            context.bezierCurveTo(450, 185, 451, 186, 452, 187);
            context.lineTo(454, 186);
            context.bezierCurveTo(452, 185, 451, 184, 449, 183);
            context.lineTo(448, 185);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(464, 197);
            context.bezierCurveTo(466, 198, 467, 199, 468, 200);
            context.lineTo(470, 198);
            context.bezierCurveTo(468, 197, 467, 196, 466, 195);
            context.lineTo(464, 197);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(472, 203);
            context.bezierCurveTo(473, 204, 475, 205, 476, 206);
            context.lineTo(477, 205);
            context.bezierCurveTo(476, 204, 475, 203, 473, 202);
            context.lineTo(472, 203);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(319, 133);
            context.bezierCurveTo(320, 133, 322, 134, 324, 134);
            context.lineTo(324, 132);
            context.bezierCurveTo(322, 132, 321, 131, 319, 131);
            context.lineTo(319, 133);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(309, 132);
            context.bezierCurveTo(310, 132, 312, 132, 314, 132);
            context.lineTo(314, 130);
            context.bezierCurveTo(312, 130, 311, 130, 309, 130);
            context.lineTo(309, 132);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(289, 130);
            context.bezierCurveTo(290, 130, 292, 131, 294, 131);
            context.lineTo(294, 129);
            context.bezierCurveTo(292, 129, 290, 128, 289, 128);
            context.lineTo(289, 130);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(387, 151);
            context.bezierCurveTo(388, 152, 390, 152, 391, 153);
            context.lineTo(392, 151);
            context.bezierCurveTo(390, 151, 389, 150, 387, 149);
            context.lineTo(387, 151);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(299, 131);
            context.bezierCurveTo(300, 131, 302, 131, 304, 131);
            context.lineTo(304, 129);
            context.bezierCurveTo(302, 129, 300, 129, 299, 129);
            context.lineTo(299, 131);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(329, 135);
            context.bezierCurveTo(330, 135, 332, 135, 333, 136);
            context.lineTo(334, 134);
            context.bezierCurveTo(332, 133, 331, 133, 329, 133);
            context.lineTo(329, 135);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(368, 144);
            context.bezierCurveTo(369, 145, 371, 145, 372, 146);
            context.lineTo(373, 144);
            context.bezierCurveTo(371, 144, 370, 143, 368, 143);
            context.lineTo(368, 144);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(377, 148);
            context.bezierCurveTo(379, 148, 380, 149, 382, 149);
            context.lineTo(383, 148);
            context.bezierCurveTo(381, 147, 379, 146, 378, 146);
            context.lineTo(377, 148);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(348, 139);
            context.bezierCurveTo(350, 139, 351, 140, 353, 140);
            context.lineTo(354, 138);
            context.bezierCurveTo(352, 138, 350, 137, 349, 137);
            context.lineTo(348, 139);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(358, 142);
            context.bezierCurveTo(360, 142, 361, 142, 363, 143);
            context.lineTo(363, 141);
            context.bezierCurveTo(362, 141, 360, 140, 359, 140);
            context.lineTo(358, 142);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(338, 137);
            context.bezierCurveTo(340, 137, 342, 137, 343, 138);
            context.lineTo(344, 136);
            context.bezierCurveTo(342, 135, 340, 135, 339, 135);
            context.lineTo(338, 137);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(487, 217);
            context.bezierCurveTo(488, 217, 488, 218, 489, 219);
            context.lineTo(490, 217);
            context.bezierCurveTo(490, 217, 489, 216, 488, 215);
            context.lineTo(487, 217);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(26, 181);
            context.bezierCurveTo(164, 43, 387, 43, 526, 181);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(437, 116);
            context.lineTo(453, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(331, 82);
            context.lineTo(337, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(221, 82);
            context.lineTo(215, 47);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(115, 116);
            context.lineTo(100, 85);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(164, 320);
            context.bezierCurveTo(226, 259, 325, 259, 387, 320);
            context.stroke();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(134, 290);
            context.lineTo(132, 288);
            context.bezierCurveTo(133, 288, 133, 287, 134, 286);
            context.lineTo(135, 288);
            context.bezierCurveTo(135, 288, 134, 289, 134, 290);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(139, 284);
            context.lineTo(138, 283);
            context.bezierCurveTo(139, 282, 140, 281, 141, 280);
            context.lineTo(143, 281);
            context.bezierCurveTo(141, 282, 140, 283, 139, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(412, 284);
            context.bezierCurveTo(411, 283, 410, 282, 409, 281);
            context.lineTo(410, 279);
            context.bezierCurveTo(411, 281, 412, 282, 414, 283);
            context.lineTo(412, 284);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(146, 278);
            context.lineTo(145, 276);
            context.bezierCurveTo(146, 275, 148, 274, 149, 273);
            context.lineTo(150, 275);
            context.bezierCurveTo(149, 276, 148, 277, 146, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(405, 278);
            context.bezierCurveTo(404, 277, 402, 276, 401, 275);
            context.lineTo(402, 273);
            context.bezierCurveTo(404, 274, 405, 275, 406, 276);
            context.lineTo(405, 278);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(154, 272);
            context.lineTo(153, 270);
            context.bezierCurveTo(154, 269, 156, 268, 157, 267);
            context.lineTo(158, 269);
            context.bezierCurveTo(157, 270, 155, 271, 154, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(397, 272);
            context.bezierCurveTo(396, 271, 395, 270, 393, 269);
            context.lineTo(395, 267);
            context.bezierCurveTo(396, 268, 397, 269, 399, 270);
            context.lineTo(397, 272);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(162, 266);
            context.lineTo(161, 264);
            context.bezierCurveTo(162, 263, 164, 262, 165, 261);
            context.lineTo(166, 263);
            context.bezierCurveTo(165, 264, 163, 265, 162, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(389, 266);
            context.bezierCurveTo(388, 265, 387, 264, 385, 263);
            context.lineTo(386, 261);
            context.bezierCurveTo(388, 262, 389, 263, 390, 264);
            context.lineTo(389, 266);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(381, 260);
            context.bezierCurveTo(380, 260, 378, 259, 377, 258);
            context.lineTo(378, 256);
            context.bezierCurveTo(379, 257, 381, 258, 382, 259);
            context.lineTo(381, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(170, 260);
            context.lineTo(169, 259);
            context.bezierCurveTo(171, 258, 172, 257, 174, 256);
            context.lineTo(175, 258);
            context.bezierCurveTo(173, 259, 172, 260, 170, 260);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(373, 255);
            context.bezierCurveTo(371, 255, 370, 254, 368, 253);
            context.lineTo(369, 251);
            context.bezierCurveTo(371, 252, 372, 253, 374, 254);
            context.lineTo(373, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(179, 255);
            context.lineTo(178, 254);
            context.bezierCurveTo(179, 253, 181, 252, 182, 251);
            context.lineTo(183, 253);
            context.bezierCurveTo(182, 254, 180, 255, 179, 255);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(364, 251);
            context.bezierCurveTo(362, 250, 361, 249, 359, 249);
            context.lineTo(360, 247);
            context.bezierCurveTo(362, 248, 363, 248, 365, 249);
            context.lineTo(364, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(188, 251);
            context.lineTo(187, 249);
            context.bezierCurveTo(188, 248, 190, 248, 191, 247);
            context.lineTo(192, 249);
            context.bezierCurveTo(191, 249, 189, 250, 188, 251);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(355, 247);
            context.bezierCurveTo(353, 246, 352, 246, 350, 245);
            context.lineTo(351, 243);
            context.bezierCurveTo(353, 244, 354, 244, 356, 245);
            context.lineTo(355, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(197, 247);
            context.lineTo(196, 245);
            context.bezierCurveTo(197, 244, 199, 244, 200, 243);
            context.lineTo(201, 245);
            context.bezierCurveTo(200, 245, 198, 246, 197, 247);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(346, 243);
            context.bezierCurveTo(344, 243, 343, 242, 341, 241);
            context.lineTo(342, 240);
            context.bezierCurveTo(343, 240, 345, 241, 346, 241);
            context.lineTo(346, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(206, 243);
            context.lineTo(205, 241);
            context.bezierCurveTo(207, 241, 208, 240, 210, 240);
            context.lineTo(210, 241);
            context.bezierCurveTo(209, 242, 207, 243, 206, 243);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(336, 240);
            context.bezierCurveTo(335, 239, 333, 239, 332, 238);
            context.lineTo(332, 237);
            context.bezierCurveTo(334, 237, 335, 238, 337, 238);
            context.lineTo(336, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(215, 240);
            context.lineTo(215, 238);
            context.bezierCurveTo(216, 237, 218, 237, 219, 237);
            context.lineTo(220, 238);
            context.bezierCurveTo(218, 239, 217, 239, 215, 240);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(327, 237);
            context.bezierCurveTo(325, 237, 324, 236, 322, 236);
            context.lineTo(323, 234);
            context.bezierCurveTo(324, 234, 326, 235, 328, 235);
            context.lineTo(327, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(225, 237);
            context.lineTo(224, 235);
            context.bezierCurveTo(226, 235, 227, 234, 229, 234);
            context.lineTo(229, 236);
            context.bezierCurveTo(228, 236, 226, 237, 225, 237);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(317, 235);
            context.bezierCurveTo(316, 235, 314, 234, 313, 234);
            context.lineTo(313, 232);
            context.bezierCurveTo(315, 232, 316, 233, 318, 233);
            context.lineTo(317, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(234, 235);
            context.lineTo(234, 233);
            context.bezierCurveTo(235, 233, 237, 232, 239, 232);
            context.lineTo(239, 234);
            context.bezierCurveTo(237, 234, 236, 235, 234, 235);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(308, 233);
            context.bezierCurveTo(306, 233, 304, 233, 303, 232);
            context.lineTo(303, 230);
            context.bezierCurveTo(305, 231, 306, 231, 308, 231);
            context.lineTo(308, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(244, 233);
            context.lineTo(244, 231);
            context.bezierCurveTo(245, 231, 247, 231, 249, 230);
            context.lineTo(249, 232);
            context.bezierCurveTo(247, 233, 246, 233, 244, 233);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(298, 232);
            context.bezierCurveTo(296, 232, 295, 231, 293, 231);
            context.lineTo(293, 229);
            context.bezierCurveTo(295, 229, 297, 230, 298, 230);
            context.lineTo(298, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(254, 232);
            context.lineTo(253, 230);
            context.bezierCurveTo(255, 230, 257, 229, 258, 229);
            context.lineTo(259, 231);
            context.bezierCurveTo(257, 231, 255, 232, 254, 232);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(288, 231);
            context.bezierCurveTo(287, 231, 285, 231, 283, 231);
            context.lineTo(283, 229);
            context.bezierCurveTo(285, 229, 287, 229, 288, 229);
            context.lineTo(288, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(264, 231);
            context.lineTo(263, 229);
            context.bezierCurveTo(265, 229, 267, 229, 268, 229);
            context.lineTo(268, 231);
            context.bezierCurveTo(267, 231, 265, 231, 264, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(278, 231);
            context.bezierCurveTo(277, 231, 275, 231, 273, 231);
            context.lineTo(273, 229);
            context.bezierCurveTo(275, 229, 277, 229, 278, 229);
            context.lineTo(278, 231);
            context.fill();

            context.fillStyle = "rgb(0,0,0)";
            context.beginPath();
            context.moveTo(418, 289);
            context.bezierCurveTo(417, 289, 417, 288, 416, 288);
            context.lineTo(417, 286);
            context.bezierCurveTo(418, 287, 419, 287, 419, 288);
            context.lineTo(418, 289);
            context.fill();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(479, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(425, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(367, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(307, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(245, 79);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(184, 89);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(126, 110);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(276, 432);
            context.lineTo(72, 141);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 45);
            context.bezierCurveTo(521, 48, 519, 50, 516, 50);
            context.lineTo(404, 50);
            context.bezierCurveTo(401, 50, 399, 48, 399, 45);
            context.lineTo(399, 17);
            context.bezierCurveTo(399, 14, 401, 12, 404, 12);
            context.lineTo(516, 12);
            context.bezierCurveTo(519, 12, 521, 14, 521, 17);
            context.lineTo(521, 45);
            context.stroke();

            context.lineStyle = "rgb(0,0,0)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(521, 345);
            context.bezierCurveTo(521, 348, 519, 350, 516, 350);
            context.lineTo(404, 350);
            context.bezierCurveTo(401, 350, 399, 348, 399, 345);
            context.lineTo(399, 317);
            context.bezierCurveTo(399, 314, 401, 312, 404, 312);
            context.lineTo(516, 312);
            context.bezierCurveTo(519, 312, 521, 314, 521, 317);
            context.lineTo(521, 345);
            context.stroke();








            //end of lines

            //textbox for text

            context.font = "24px calibri";
            context.fillText("197 OF BIP", 407, 39);
            context.textAlign = "center";

            context.font = "24px calibri";
            context.fillText("197 IF BIP", 457, 340);
            context.textAlign = "center";

            //outer row
            //text 1
            context.font = "24px calibri";
            context.fillText("28%", 70, 85);

            //text 2
            context.font = "24px calibri";
            context.fillText("46%", 279, 35);

            //text 3
            context.font = "24px calibri";
            context.fillText("27%", 485, 85);

            //5 divisons row 1
            //text 1
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 60, 138);

            //text 2
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 165, 85);

            //text 3
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 275, 65);

            //text 4
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 390, 85);

            //text 5
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 490, 138);

            //9 divisons row 2
            //text 6
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 65, 190);

            //text 7
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 113, 158);

            //text 8
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 165, 133);

            //text 9
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 217, 115);

            //text 10
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("16", 275, 110);

            //text 11
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 333, 115);

            //text 12
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 387, 133);

            //text 13
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 438, 155);

            //text 14
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 485, 190);

            //9 divisons row 3
            //text 15
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 100, 230);

            //text 16
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 140, 205);

            //text 17 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 185, 185);

            //text 18
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 228, 170);

            //text 19
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("10", 275, 163);

            //text 20
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 323, 170);

            //text 21
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 370, 185);

            //text 22
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 410, 205);

            //text 23
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 450, 230);

            //9 divisons row 4
            //text 24
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 157, 300);

            //text 25
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 187, 285);

            //text 26 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("9", 215, 270);

            //text 27
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("7", 245, 260);

            //text 28
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 275, 255);

            //text 29
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("8", 308, 260);

            //text 30
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("2", 335, 270);

            //text 31
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("3", 364, 285);

            //text 32
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 393, 300);

            //9 divisons row 5
            //text 33
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("18", 183, 330);

            //text 34
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("27", 203, 315);

            //text 35 
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("17", 226, 305);

            //text 36
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("21", 252, 297);

            //text 37
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 275, 295);

            //text 38
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("6", 300, 297);

            //text 39
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("4", 325, 305);

            //text 40
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("5", 347, 315);

            //text 41
            context.font = "20px calibri";
            context.fillStyle = 'black';
            context.fillText("1", 367, 330);
        }
    }



}


</script>
	